Optimize database calls across multiple components by implementing Promise.all for parallel fetching of data, enhancing performance and reducing loading times.

components/navigation/ChallengeBadge.tsx

@@ -15,7 +15,13 @@ export default function ChallengeBadge({
   const [count, setCount] = useState(initialCount);
 
   useEffect(() => {
-    // Récupérer le nombre de défis actifs
+    // Si on a déjà un initialCount, l'utiliser et ne pas faire d'appel immédiat
+    // On rafraîchit seulement après un délai pour éviter les appels redondants
+    if (initialCount > 0) {
+      setCount(initialCount);
+    }
+
+    // Récupérer le nombre de défis actifs (seulement si pas d'initialCount ou pour rafraîchir)
     const fetchActiveCount = async () => {
       try {
         const response = await fetch("/api/challenges/active-count");
@@ -26,13 +32,16 @@ export default function ChallengeBadge({
       }
     };
 
-    fetchActiveCount();
+    // Si pas d'initialCount, charger immédiatement, sinon attendre 30s avant le premier refresh
+    if (initialCount === 0) {
+      fetchActiveCount();
+    }
 
     // Rafraîchir toutes les 30 secondes
     const interval = setInterval(fetchActiveCount, 30000);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [initialCount]);
 
   return (
     <Link
@@ -45,9 +54,7 @@ export default function ChallengeBadge({
       onMouseEnter={(e) =>
         (e.currentTarget.style.color = "var(--accent-color)")
       }
-      onMouseLeave={(e) =>
-        (e.currentTarget.style.color = "var(--foreground)")
-      }
+      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--foreground)")}
       title={
         count > 0
           ? `${count} défi${count > 1 ? "s" : ""} actif${count > 1 ? "s" : ""}`
@@ -69,4 +76,3 @@ export default function ChallengeBadge({
     </Link>
   );
 }
-