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>
   );
 }
-

components/navigation/NavigationWrapper.tsx

@@ -21,23 +21,25 @@ export default async function NavigationWrapper() {
   let activeChallengesCount = 0;
 
   if (session?.user?.id) {
-    const user = await userService.getUserById(session.user.id, {
-      username: true,
-      avatar: true,
-      hp: true,
-      maxHp: true,
-      xp: true,
-      maxXp: true,
-      level: true,
-    });
+    // Paralléliser les appels DB
+    const [user, count] = await Promise.all([
+      userService.getUserById(session.user.id, {
+        username: true,
+        avatar: true,
+        hp: true,
+        maxHp: true,
+        xp: true,
+        maxXp: true,
+        level: true,
+      }),
+      challengeService.getActiveChallengesCount(session.user.id),
+    ]);
 
     if (user) {
       userData = user;
     }
 
-    // Récupérer le nombre de défis actifs
-    activeChallengesCount =
-      await challengeService.getActiveChallengesCount(session.user.id);
+    activeChallengesCount = count;
   }
 
   return (