feat: loading bar for pages

src/components/layout/ClientLayout.tsx

@@ -10,6 +10,7 @@ import { usePathname } from "next/navigation";
 import { PreferencesProvider } from "@/contexts/PreferencesContext";
 import { registerServiceWorker } from "@/lib/registerSW";
 import { NetworkStatus } from "../ui/NetworkStatus";
+import { LoadingBar } from "@/components/ui/loading-bar";
 
 // Routes qui ne nécessitent pas d'authentification
 const publicRoutes = ["/login", "/register"];
@@ -63,6 +64,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <PreferencesProvider>
         <div className="relative min-h-screen">
+          <LoadingBar />
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
           <main className={`${!isPublicRoute ? "container pt-4 md:pt-8" : ""}`}>{children}</main>

src/components/layout/Sidebar.tsx

@@ -106,13 +106,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
   };
 
   const handleLinkClick = useCallback(
-    (path: string) => {
+    async (path: string) => {
       if (pathname === path) {
         onClose();
         return;
       }
+      window.dispatchEvent(new Event("navigationStart"));
       router.push(path);
       onClose();
+      // On attend que la page soit chargée
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      window.dispatchEvent(new Event("navigationComplete"));
     },
     [pathname, router, onClose]
   );

src/components/ui/loading-bar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+
+export function LoadingBar() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (isLoading) {
+      setShouldRender(true);
+    } else {
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading]);
+
+  useEffect(() => {
+    const handleStart = () => {
+      setIsLoading(true);
+    };
+
+    const handleStop = () => {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 300);
+    };
+
+    window.addEventListener("navigationStart", handleStart);
+    window.addEventListener("navigationComplete", handleStop);
+
+    return () => {
+      window.removeEventListener("navigationStart", handleStart);
+      window.removeEventListener("navigationComplete", handleStop);
+    };
+  }, []);
+
+  if (!shouldRender) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50",
+        "bg-background/80 backdrop-blur-sm",
+        "flex items-center justify-center",
+        isLoading ? "opacity-100" : "opacity-0 transition-opacity duration-500"
+      )}
+    >
+      <div className="flex flex-col items-center gap-2 px-4 py-2 rounded-lg bg-background/50 backdrop-blur-sm shadow-lg">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <p className="text-sm text-muted-foreground">Chargement...</p>
+      </div>
+    </div>
+  );
+}