Move fetching of events to browser

src/routes/private/events/+page.server.ts

@@ -1,7 +0,0 @@
-export async function load({ locals }) {
-    const { data: events, error } = await locals.supabase
-        .from('events')
-        .select('*')
-        .order('date', { ascending: false });
-    return { events };
-}

src/routes/private/events/+page.svelte

@@ -1,20 +1,81 @@
 <script lang="ts">
-    export let data;
+    // Get the supabase client
+    let { data } = $props();
+    
+    // Create reactive states for events and loading
+    let events = $state([]);
+    let loading = $state(true);
+    let error = $state(null);
+
+    // Load events when component mounts
+    $effect(() => {
+        loadEvents();
+    });
+    
+    async function loadEvents() {
+        loading = true;
+        error = null;
+        
+        try {
+            const { data: eventsData, error: supabaseError } = await data.supabase
+                .from('events')
+                .select('*')
+                .order('date', { ascending: false });
+                
+            if (supabaseError) throw supabaseError;
+            
+            events = eventsData || [];
+        } catch (err) {
+            console.error('Error fetching events:', err);
+            error = 'Failed to load events';
+        } finally {
+            loading = false;
+        }
+    }
 </script>
 
 <h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
-  {#each data.events as event}
-    <a
-      href={`/private/events/event?id=${event.id}`}
-      class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
-    >
-      <div class="flex flex-col gap-1">
-        <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
-        <span class="text-gray-500 text-sm">{event.date}</span>
+  {#if loading}
+    <!-- Loading placeholders -->
+    {#each Array(4) as _}
+      <div class="border border-gray-300 rounded bg-white p-4 animate-pulse">
+        <div class="flex flex-col gap-1">
+          <div class="h-5 bg-gray-200 rounded w-3/4 mb-2"></div>
+          <div class="h-4 bg-gray-100 rounded w-1/2"></div>
+        </div>
       </div>
-    </a>
-  {/each}
+    {/each}
+  {:else if error}
+    <!-- Error state -->
+    <div class="col-span-full text-center p-4 text-red-600">
+      {error}
+      <button 
+        onclick={loadEvents}
+        class="ml-2 text-blue-600 underline"
+      >
+        Try again
+      </button>
+    </div>
+  {:else if events.length === 0}
+    <!-- Empty state -->
+    <div class="col-span-full text-center p-4 text-gray-500">
+      No events found
+    </div>
+  {:else}
+    <!-- Events list -->
+    {#each events as event}
+      <a
+        href={`/private/events/event?id=${event.id}`}
+        class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
+      >
+        <div class="flex flex-col gap-1">
+          <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
+          <span class="text-gray-500 text-sm">{event.date}</span>
+        </div>
+      </a>
+    {/each}
+  {/if}
 </div>
 
 <a