Enhance event registration handling: Integrate server-side session management to fetch user registrations for upcoming events, preventing flicker on load. Update EventsPageSection to accept initial registration data, improving user experience by pre-populating registration states.

app/events/page.tsx

@@ -2,6 +2,7 @@ import NavigationWrapper from "@/components/NavigationWrapper";
 import EventsPageSection from "@/components/EventsPageSection";
 import { prisma } from "@/lib/prisma";
 import { getBackgroundImage } from "@/lib/preferences";
+import { auth } from "@/lib/auth";
 
 export default async function EventsPage() {
   const events = await prisma.event.findMany({
@@ -12,10 +13,41 @@ export default async function EventsPage() {
 
   const backgroundImage = await getBackgroundImage("events", "/got-2.jpg");
 
+  // Récupérer les inscriptions côté serveur pour éviter le clignotement
+  const session = await auth();
+  const initialRegistrations: Record<string, boolean> = {};
+
+  if (session?.user?.id) {
+    const upcomingEvents = events.filter((e) => e.status === "UPCOMING");
+    const eventIds = upcomingEvents.map((e) => e.id);
+
+    if (eventIds.length > 0) {
+      const registrations = await prisma.eventRegistration.findMany({
+        where: {
+          userId: session.user.id,
+          eventId: {
+            in: eventIds,
+          },
+        },
+        select: {
+          eventId: true,
+        },
+      });
+
+      registrations.forEach((reg) => {
+        initialRegistrations[reg.eventId] = true;
+      });
+    }
+  }
+
   return (
     <main className="min-h-screen bg-black relative">
       <NavigationWrapper />
-      <EventsPageSection events={events} backgroundImage={backgroundImage} />
+      <EventsPageSection
+        events={events}
+        backgroundImage={backgroundImage}
+        initialRegistrations={initialRegistrations}
+      />
     </main>
   );
 }