From 0f010db22146348dad439d7cee669de876710267 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 12 Jun 2026 17:35:50 +0300
Subject: [PATCH] Anchor nprogress to main content (below header)

---
 app/components/layout/index.tsx |  8 ++++++++
 app/root.tsx                    |  9 +++++++--
 app/styles/common.css           | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 0179dec2a..8175c9417 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -58,6 +58,13 @@ import { TopRightButtons } from "./TopRightButtons";
 
 const MAX_DESKTOP_FRIENDS = 4;
 
+/** Id of the loading-bar track rendered inside the header. NProgress mounts its
+ * bar into it; the track sits just below the header border, spans only the area
+ * between the sidebars, and clips the bar so it never extends over a sidebar.
+ * Living inside the header makes it follow the header on scroll and in
+ * standalone (PWA) mode where the header grows by the safe-area inset. */
+export const NPROGRESS_ANCHOR_ID = "nprogress-anchor";
+
 function useRelativeDayFormat() {
 	const { i18n } = useTranslation();
 	const { formatter: timeFormatter } = useDateTimeFormat({
@@ -438,6 +445,7 @@ export function Layout({
 						}
 						chatUnreadCount={chatContext?.totalUnreadCount}
 					/>
+					<div id={NPROGRESS_ANCHOR_ID} aria-hidden />
 				</header>
 				{showLeaderboard ? (
 					<FuseZone
diff --git a/app/root.tsx b/app/root.tsx
index f989b1c85..c5353f8c2 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -38,7 +38,7 @@ import type { Route } from "./+types/root";
 import { Catcher } from "./components/Catcher";
 import { SendouToastRegion, toastQueue } from "./components/elements/Toast";
 import { FusePageInit } from "./components/fuse/Fuse";
-import { Layout } from "./components/layout";
+import { Layout, NPROGRESS_ANCHOR_ID } from "./components/layout";
 import { getUser } from "./features/auth/core/user.server";
 import { userMiddleware } from "./features/auth/core/user-middleware.server";
 import { ChatProvider } from "./features/chat/ChatProvider";
@@ -73,6 +73,11 @@ import "~/styles/utils.css";
 import "~/styles/flags.css";
 import "nprogress/nprogress.css";
 
+// Anchor the loading bar to the header so it sits between the sidebars. Set at
+// module scope (not in an effect) so the very first navigation's NProgress.start
+// already targets the header instead of briefly rendering over the sidebar.
+NProgress.configure({ parent: `#${NPROGRESS_ANCHOR_ID}` });
+
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
 	if (isRevalidation(args)) return true;
 
@@ -277,7 +282,7 @@ function useLoadingIndicator() {
 				NProgress.done();
 			}
 		},
-		250,
+		150,
 		[transition.state],
 	);
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index 154c013e1..533289f54 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -614,6 +614,27 @@
 	}
 }
 
+/* Track that NProgress renders its bar into (see NPROGRESS_ANCHOR_ID). It is a
+ * child of the header positioned just below the header's 1.5px bottom border, so
+ * it follows the header on scroll and in standalone (PWA) mode. It spans only the
+ * header width (the area between the sidebars), and its overflow: hidden clips the
+ * bar — which NProgress slides in from the left — so the bar can never extend over
+ * a sidebar. Unlayered + id selector so it beats NProgress's own unlayered
+ * .nprogress-custom-parent rules (and the @layer-wrapped CSS modules). */
+#nprogress-anchor {
+	position: absolute;
+	top: calc(100% + 1.5px);
+	left: 0;
+	right: 0;
+	height: 2.5px;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.nprogress-custom-parent #nprogress .bar {
+	height: 100%;
+}
+
 .top-leaderboard {
 	min-height: 100px;
 	max-height: 100px;