fix/style: use uniform loading screens #111

frontend/next.config.ts

@@ -20,4 +20,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default nextConfig;

frontend/src/app/event/[slug]/manage/page.tsx

@@ -6,7 +6,7 @@ import { ArrowUpRight } from "lucide-react";
 import { AdminNavbar } from "@/components/admin/admin-navbar";
 import BokehBackground from "@/components/create-event/bokeh-background";
 import Squares from "@/components/create-event/squares-background";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { LoadingScreen } from "@/components/ui/loading-screen";
 import { ErrorState } from "@/components/ui/error-state";
 import { useEvent } from "@/hooks/event/use-event";
 import { useGuests } from "@/hooks/guest/use-guests";
@@ -49,7 +49,15 @@ export default function ManageEventPage() {
   }, [canManage, roleLoading, loading, event, slug, router]);
 
   if (loading || roleLoading) {
-    return <LoadingSpinner message="Loading event management..." />;
+    return (
+      <div className="min-h-screen w-full bg-gradient-to-br from-[#0a1f14] via-[#0a1520] to-[#120c08] text-white relative overflow-hidden font-urbanist">
+        <BokehBackground />
+        <Squares direction="diagonal" speed={0.3} />
+        <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <LoadingScreen message="LOADING EVENT MANAGEMENT..." colorTheme="orange" />
+        </div>
+      </div>
+    );
   }
 
   if (error || !event) {
@@ -63,7 +71,15 @@ export default function ManageEventPage() {
   }
 
   if (!canManage) {
-    return <LoadingSpinner message="Redirecting..." />;
+    return (
+      <div className="min-h-screen w-full bg-gradient-to-br from-[#0a1f14] via-[#0a1520] to-[#120c08] text-white relative overflow-hidden font-urbanist">
+        <BokehBackground />
+        <Squares direction="diagonal" speed={0.3} />
+        <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <LoadingScreen message="REDIRECTING..." colorTheme="orange" />
+        </div>
+      </div>
+    );
   }
 
   const eventUrl = `${window.location.origin}/event/${slug}`;
@@ -80,7 +96,7 @@ export default function ManageEventPage() {
 
       <AdminNavbar activeTab="events" />
 
-      <main className="relative z-10 w-full max-w-6xl mx-auto px-3 md:px-6 lg:px-8 py-4 md:py-10 pb-16 mt-16">
+      <main className="relative z-10 w-full max-w-6xl mx-auto px-3 md:px-6 lg:px-8 py-4 md:py-10 pb-16 mt-16 animate-in fade-in duration-500">
         <div className="flex items-center justify-between gap-3 mb-4 md:mb-6">
           <div className="min-w-0 flex-1">
             <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white truncate">
@@ -179,4 +195,4 @@ export default function ManageEventPage() {
       />
     </div>
   );
-}
+}

frontend/src/app/event/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { LogOut, Clock } from "lucide-react";
 import BokehBackground from "@/components/create-event/bokeh-background";
 import Squares from "@/components/create-event/squares-background";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { LoadingScreen } from "@/components/ui/loading-screen"; 
 import { ErrorState } from "@/components/ui/error-state";
 import { EventCoverImage } from "@/components/event/event-cover-image";
 import { EventDateTime } from "@/components/event/event-date-time";
@@ -16,8 +16,8 @@ import { EventShareCard } from "@/components/event/event-share-card";
 import { EventAbout } from "@/components/event/event-about";
 import { EventHost } from "@/components/event/event-host";
 import { LocationMapPreview } from "@/components/event/location-map-preview";
-import { createClient } from "@/lib/supabase/client";
 import { useEvent } from "@/hooks/event/use-event";
+import { getCurrentUserEmail } from "@/app/event/actions"; 
 
 import { setLastViewedEventSlug } from "@/utils/last-viewed-event";
 import { logoutAction } from "@/actions/authActions";
@@ -83,14 +83,12 @@ export default function EventPage() {
           // Set email
           setHostEmail(result.data.email || undefined);
         } else {
-          // Fallback: check if it's the current logged-in user
-          const supabase = createClient();
-          const { data: { user: authUser } } = await supabase.auth.getUser();
+          // Fallback: check if it's the current logged-in user using your Server Action
+          const currentUser = await getCurrentUserEmail();
 
-          if (authUser && authUser.id === event.organizerId) {
-            const fullName = authUser.user_metadata?.full_name;
-            setHostName(fullName || authUser.email || "You");
-            setHostEmail(authUser.email || undefined);
+          if (currentUser && currentUser.id === event.organizerId) {
+            setHostName(currentUser.email ?? "You");
+            setHostEmail(currentUser.email ?? undefined);
           } else {
             setHostName("Event Organizer");
             setHostEmail(undefined);
@@ -161,7 +159,15 @@ export default function EventPage() {
   }, [refetch, router]);
 
   if (loading) {
-    return <LoadingSpinner message="Loading event..." />;
+    return (
+      <div className="min-h-screen w-full bg-gradient-to-br from-[#0a1f14] via-[#0a1520] to-[#120c08] text-white relative overflow-hidden font-montserrat">
+        <BokehBackground />
+        <Squares direction="diagonal" speed={0.3} />
+        <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <LoadingScreen message="LOADING EVENT..." colorTheme="orange" />
+        </div>
+      </div>
+    );
   }
 
   if (error || !event) {
@@ -288,4 +294,4 @@ export default function EventPage() {
       </main>
     </div>
   );
-}
+}

frontend/src/app/event/[slug]/register/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { useParams, useRouter } from "next/navigation";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { LoadingScreen } from "@/components/ui/loading-screen";
 import { ErrorState } from "@/components/ui/error-state";
 import { RegistrationFlow } from "@/components/registration/RegistrationFlow";
 import { useEvent } from "@/hooks/event/use-event";
+import BokehBackground from "@/components/create-event/bokeh-background";
+import Squares from "@/components/create-event/squares-background";
 
 export default function EventRegisterPage() {
   const params = useParams();
@@ -13,7 +15,15 @@ export default function EventRegisterPage() {
   const { event, loading, error } = useEvent(slug);
 
   if (loading) {
-    return <LoadingSpinner message="Loading event..." />;
+    return (
+      <div className="min-h-screen w-full bg-gradient-to-br from-[#0a1f14] via-[#0a1520] to-[#120c08] text-white relative overflow-hidden font-urbanist">
+        <BokehBackground />
+        <Squares direction="diagonal" speed={0.3} />
+        <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <LoadingScreen message="LOADING REGISTRATION..." colorTheme="orange" />
+        </div>
+      </div>
+    );
   }
 
   if (error || !event) {
@@ -29,4 +39,4 @@ export default function EventRegisterPage() {
   return (
     <RegistrationFlow eventSlug={slug} formQuestions={event.questions || []} />
   );
-}
+}

frontend/src/app/event/actions.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+
+export async function getEvents() {
+  const supabase = await createClient();
+
+  const { data, error } = await supabase
+    .from("events")
+    .select("*");
+
+  if (error) {
+    console.error("Error fetching events:", error);
+    return { success: false, error: error.message };
+  }
+
+  return { success: true, data };
+}
+
+export async function getCurrentUserEmail() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) return null;
+
+  return {
+    id: user.id,
+    email: user.email
+  };
+}