Responsivness improvements

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

@@ -1,20 +1,44 @@
 <script lang="ts">
-    export let data;
+    import { onMount } from 'svelte';
+    let { data } = $props();
+
+    let events: any[] = $state([]);
+    let loading = $state(true);
+
+    onMount(async () => {
+      const { data: evs } = await data.supabase
+        .from('events')
+        .select('*')
+        .order('date', { ascending: false });
+      events = evs || [];
+      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}
+    {#each Array(4) as _}
+      <div class="block border border-gray-300 rounded bg-white p-4 shadow-none min-h-[72px] h-full w-full">
+        <div class="flex flex-col gap-1">
+          <span class="font-semibold text-lg text-gray-300 bg-gray-200 rounded w-1/2 h-6 mb-2 inline-block"></span>
+          <span class="text-gray-300 text-sm bg-gray-100 rounded w-1/3 h-4 inline-block"></span>
+        </div>
       </div>
-    </a>
-  {/each}
+    {/each}
+  {:else}
+    {#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 min-h-[72px] h-full w-full"
+      >
+        <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