Refactor event registration logic in EventsPageSection: Introduce useRef to track initial data usage, preventing unnecessary API calls when user session changes. Update loading and error handling to enhance user experience during event registration.

components/EventsPageSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
@@ -91,6 +91,9 @@ export default function EventsPageSection({
     [initialRegistrations]
   );
 
+  // Ref pour tracker si on a déjà utilisé les données initiales
+  const hasUsedInitialData = useRef(hasInitialData);
+
   // Séparer et trier les événements (du plus récent au plus ancien)
   const upcomingEvents = events
     .filter((e) => e.status === "UPCOMING" || e.status === "LIVE")
@@ -115,21 +118,27 @@ export default function EventsPageSection({
     eventsByDate[dateKey].push(event);
   });
 
-  // Synchroniser les inscriptions si la session change côté client
-  // Ne charger que si on n'a pas de données initiales (cas où l'utilisateur se connecte après le chargement)
+  // Mettre à jour le ref quand on a des données initiales
   useEffect(() => {
-    // Si on a déjà des données initiales, ne jamais les écraser
     if (hasInitialData) {
+      hasUsedInitialData.current = true;
+    }
+  }, [hasInitialData]);
+
+  // Ne charger depuis l'API que si on n'a pas de données initiales
+  // (cas où l'utilisateur se connecte après le chargement de la page)
+  useEffect(() => {
+    // Si on a déjà des données initiales, ne jamais charger depuis l'API
+    if (hasUsedInitialData.current) {
       return;
     }
 
-    // Si pas de session, réinitialiser seulement si on n'avait pas de données initiales
+    // Si pas de session, ne rien faire (on garde les données vides)
     if (!session?.user?.id) {
-      setRegistrations({});
       return;
     }
 
-    // Charger les inscriptions seulement si on n'a pas de données initiales
+    // Charger les inscriptions depuis l'API seulement si on n'a pas de données initiales
     const checkRegistrations = async () => {
       const upcomingOnlyEvents = events.filter((e) => e.status === "UPCOMING");
       const registrationChecks = upcomingOnlyEvents.map(async (event) => {
@@ -152,7 +161,7 @@ export default function EventsPageSection({
     };
 
     checkRegistrations();
-  }, [session?.user?.id, events, hasInitialData]);
+  }, [session?.user?.id, events]);
 
   // Fonctions pour le calendrier
   const getDaysInMonth = (date: Date) => {