feat: Add a top progress loader when navigating pages

LubomirGeorgiev · LubomirGeorgiev · commit f9bc0294280f · 2025-03-24T23:37:40.000+02:00
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "ms": "^2.1.3",
     "next": "15.2.3",
     "next-themes": "^0.4.4",
+    "nextjs-toploader": "^3.8.15",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import "server-only";
 import { ThemeProvider } from "@/components/providers";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import NextTopLoader from 'nextjs-toploader'
 import { SITE_NAME, SITE_DESCRIPTION, SITE_URL } from "@/constants";
 import { StartupStudioStickyBanner } from "@/components/startup-studio-sticky-banner";
 import { getSessionFromCookie } from "@/utils/auth";
@@ -83,6 +84,11 @@ export default function BaseLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
+        <NextTopLoader
+          initialPosition={0.15}
+          shadow="0 0 10px #000, 0 0 5px #000"
+          height={4}
+        />
         <Suspense fallback={<ThemeProviderFallback>{children}</ThemeProviderFallback>}>
           <SessionProvider>
             {children}
diff --git a/src/components/providers.tsx b/src/components/providers.tsx
@@ -9,6 +9,8 @@ import { useEffect } from "react"
 import { useConfigStore } from "@/state/config"
 import type { getConfig } from "@/flags"
 import { EmailVerificationDialog } from "./email-verification-dialog"
+import { useTopLoader } from 'nextjs-toploader'
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
 type Props = {
   session: SessionValidationResult
@@ -23,6 +25,23 @@ export function ThemeProvider({
 }: React.ComponentProps<typeof NextThemesProvider> & Props) {
   const setSession = useSessionStore((store) => store.setSession)
   const setConfig = useConfigStore((store) => store.setConfig)
+  const { start, done } = useTopLoader()
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    const _push = router.push.bind(router);
+
+    router.push = (href, options) => {
+      start();
+      _push(href, options);
+    };
+  }, [])
+
+  useEffect(() => {
+    done();
+  }, [pathname, searchParams]);
 
   useEffect(() => {
     setSession(session)
