Feature/page loading indicator

app/components/NavigationProgressProvider.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import PageLoadingBar from "./PageLoadingBar";
+import type { ReactNode } from "react";
+
+export default function NavigationProgressProvider({
+    children,
+}: {
+    children: ReactNode;
+}) {
+    const [showProgress, setShowProgress] = useState(false);
+    const router = useRouter();
+
+    useEffect(() => {
+        const originalPush = router.push;
+        const originalReplace = router.replace;
+
+        const handleNavigationStart = () => {
+            setShowProgress(true);
+        };
+
+        const wrappedPush = (href: string, options?: any) => {
+            handleNavigationStart();
+            return originalPush.call(router, href, options);
+        };
+
+        const wrappedReplace = (href: string, options?: any) => {
+            handleNavigationStart();
+            return originalReplace.call(router, href, options);
+        };
+
+        router.push = wrappedPush;
+        router.replace = wrappedReplace;
+
+        const handlePopState = () => {
+            handleNavigationStart();
+        };
+
+        window.addEventListener("popstate", handlePopState);
+
+        const timeoutId = setTimeout(() => {
+            setShowProgress(false);
+        }, 5000);
+
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+            clearTimeout(timeoutId);
+            router.push = originalPush;
+            router.replace = originalReplace;
+        };
+    }, [router]);
+
+    return (
+        <>
+            {showProgress && <PageLoadingBar />}
+            {children}
+        </>
+    );
+}

app/components/PageLoadingBar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function PageLoadingBar() {
+    const [progress, setProgress] = useState(0);
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        setIsVisible(true);
+        setProgress(10);
+
+        const interval = setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90) return prev;
+                const increment = Math.random() * (15 - 5) + 5;
+                return Math.min(prev + increment, 90);
+            });
+        }, 300);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        if (progress >= 90) {
+            const timeout = setTimeout(() => {
+                setProgress(100);
+                setTimeout(() => setIsVisible(false), 300);
+            }, 500);
+            return () => clearTimeout(timeout);
+        }
+    }, [progress]);
+
+    if (!isVisible) return null;
+
+    return (
+        <div className="fixed top-0 left-0 right-0 z-[9998] pointer-events-none">
+            <div className="h-1 w-full bg-gray-100/30 overflow-hidden">
+                <div
+                    className="h-full bg-gradient-to-r from-[#ea7032] to-[#ea7032] transition-all duration-300 ease-out shadow-lg"
+                    style={{
+                        width: `${progress}%`,
+                        boxShadow:
+                            progress < 100
+                                ? "0 0 10px rgba(234, 112, 50, 0.7)"
+                                : "none",
+                    }}
+                />
+            </div>
+
+            {progress < 100 && (
+                <div
+                    className="absolute top-0 left-0 h-1 bg-[#ea7032]/20 blur-sm transition-all duration-300"
+                    style={{ width: `${progress + 5}%` }}
+                />
+            )}
+        </div>
+    );
+}

app/components/Providers.tsx

@@ -1,7 +1,18 @@
 "use client";
 
 import { SessionProvider } from "next-auth/react";
+import NavigationProgressProvider from "./NavigationProgressProvider";
+import type { ReactNode } from "react";
 
-export default function Providers({ children }: { children: React.ReactNode }) {
-    return <SessionProvider>{children}</SessionProvider>;
+/**
+ * Client-side context providers:
+ * - SessionProvider: Required for useSession() in client components
+ * - NavigationProgressProvider: Shows a loading bar between page transitions
+ */
+export default function Providers({ children }: { children: ReactNode }) {
+    return (
+        <SessionProvider>
+            <NavigationProgressProvider>{children}</NavigationProgressProvider>
+        </SessionProvider>
+    );
 }