refacto: network loader is now truther

src/components/ui/network-progress.tsx

@@ -34,6 +34,7 @@ export function NetworkProgressProvider({ children }: { children: React.ReactNod
   const totalProgress = Object.values(activeRequests).reduce((acc, curr) => acc + curr, 0);
   const requestCount = Object.keys(activeRequests).length;
   const averageProgress = requestCount > 0 ? totalProgress / requestCount : 0;
+  const displayProgress = Math.min(Math.round(averageProgress), 100);
 
   return (
     <NetworkProgressContext.Provider value={{ startProgress, updateProgress, completeProgress }}>
@@ -42,19 +43,24 @@ export function NetworkProgressProvider({ children }: { children: React.ReactNod
         <>
           {/* Barre de progression en haut */}
           <div className="fixed top-0 left-0 right-0 z-50">
-            <div className="h-1 w-full bg-muted">
+            <div className="h-0.5 w-full bg-muted overflow-hidden">
               <div
-                className="h-full bg-primary transition-all duration-300 ease-out"
-                style={{ width: `${averageProgress}%` }}
+                className="h-full bg-primary transition-all ease-in-out duration-300"
+                style={{
+                  width: `${averageProgress}%`,
+                  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                }}
               />
             </div>
           </div>
 
           {/* Indicateur de progression au centre */}
-          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
-            <div className="bg-background/80 backdrop-blur-sm rounded-lg p-4 flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm font-medium">{Math.round(averageProgress)}%</span>
+          <div className="fixed top-14 left-1/2 transform -translate-x-1/2 z-50">
+            <div className="bg-background/80 backdrop-blur-sm rounded-lg px-3 py-1.5 flex items-center gap-2 shadow-sm">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              <span className="text-xs font-medium">
+                Chargement {displayProgress < 100 && `${displayProgress}%`}
+              </span>
             </div>
           </div>
         </>

src/lib/hooks/use-network-request.ts

@@ -1,39 +1,134 @@
 "use client";
 
-import { useNetworkProgress, simulateProgress } from "@/components/ui/network-progress";
-import { useCallback } from "react";
+import { useNetworkProgress } from "@/components/ui/network-progress";
+import { useCallback, useRef, useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
 
 export function useNetworkRequest() {
   const { startProgress, updateProgress, completeProgress } = useNetworkProgress();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentRequestId = useRef<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Fonction pour simuler une progression graduelle
+  const simulateProgress = useCallback(
+    (requestId: string, start: number, end: number) => {
+      let current = start;
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+      }
+
+      progressIntervalRef.current = setInterval(() => {
+        if (current < end) {
+          current = Math.min(current + Math.random() * 2, end);
+          if (requestId === currentRequestId.current) {
+            updateProgress(requestId, current);
+          }
+        } else {
+          if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
+          }
+        }
+      }, 200);
+    },
+    [updateProgress]
+  );
+
+  useEffect(() => {
+    // Si on a un requestId en cours, c'est que la navigation est terminée
+    if (currentRequestId.current) {
+      updateProgress(currentRequestId.current, 100);
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+      setTimeout(() => {
+        if (currentRequestId.current) {
+          completeProgress(currentRequestId.current);
+          currentRequestId.current = null;
+        }
+      }, 100);
+    }
+
+    // Cleanup
+    return () => {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
+  }, [pathname, searchParams, updateProgress, completeProgress]);
 
   const executeRequest = useCallback(
     async <T>(requestFn: () => Promise<T>): Promise<T> => {
-      const requestId = Math.random().toString(36).substring(7);
+      // On démarre un nouveau requestId uniquement si on n'en a pas déjà un
+      if (!currentRequestId.current) {
+        currentRequestId.current = Math.random().toString(36).substring(7);
+        startProgress(currentRequestId.current);
+
+        // Création d'un nouveau AbortController pour cette requête
+        abortControllerRef.current = new AbortController();
+
+        // On commence à 10% et on simule jusqu'à 30%
+        updateProgress(currentRequestId.current, 10);
+        simulateProgress(currentRequestId.current, 10, 30);
+      }
 
       try {
-        startProgress(requestId);
+        // On wrap la fonction de requête pour intercepter les appels fetch
+        const wrappedFn = async () => {
+          const originalFetch = window.fetch;
+          window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+            if (!currentRequestId.current) return originalFetch(input, init);
 
-        // Démarrer la simulation de progression
-        const progressPromise = simulateProgress(requestId, updateProgress, 500);
+            // On passe à 40% quand la requête démarre
+            updateProgress(currentRequestId.current, 40);
+            simulateProgress(currentRequestId.current, 40, 80);
 
-        // Exécuter la requête
-        const result = await requestFn();
+            const response = await originalFetch(input, {
+              ...init,
+              signal: abortControllerRef.current?.signal,
+            });
 
-        // Attendre que la simulation soit terminée
-        await progressPromise;
+            // On passe à 90% quand la requête est terminée
+            updateProgress(currentRequestId.current, 90);
+            simulateProgress(currentRequestId.current, 90, 95);
 
-        // Forcer la progression à 100% avant de terminer
-        updateProgress(requestId, 100);
-        setTimeout(() => completeProgress(requestId), 100);
+            return response;
+          };
 
-        return result;
+          try {
+            return await requestFn();
+          } finally {
+            window.fetch = originalFetch;
+          }
+        };
+
+        return await wrappedFn();
       } catch (error) {
-        // En cas d'erreur, on termine quand même la progression
-        completeProgress(requestId);
+        // En cas d'erreur, on nettoie tout
+        if (progressIntervalRef.current) {
+          clearInterval(progressIntervalRef.current);
+          progressIntervalRef.current = null;
+        }
+        if (currentRequestId.current) {
+          completeProgress(currentRequestId.current);
+          currentRequestId.current = null;
+        }
+        if (abortControllerRef.current) {
+          abortControllerRef.current = null;
+        }
         throw error;
       }
     },
-    [startProgress, updateProgress, completeProgress]
+    [startProgress, updateProgress, completeProgress, simulateProgress]
   );
 
   return { executeRequest };