Responsivness improvements

src/lib/helpers/event.ts

@@ -1,4 +1,4 @@
-export async function load({ locals, url }) {
+export async function load({ data, url }) {
     const event_id = url.searchParams.get('id');
     const { data: event_data, error: eventError } = await locals.supabase
         .from('events')

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

@@ -1,13 +1,36 @@
 <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}
+  {#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>
+    {/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"
+        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>
@@ -15,6 +38,7 @@
         </div>
       </a>
     {/each}
+  {/if}
 </div>
 
 <a

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

@@ -1,17 +1,50 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+
 	let { data } = $props();
 
-	const scannedCount = data.participants.filter((p) => p.scanned).length;
-	const notScannedCount = data.participants.length - scannedCount;
+	let event_data: any = $state(null);
+	let participants: any[] = $state([]);
+	let loading = $state(true);
+	let scannedCount: number = $state(0);
+	let notScannedCount: number = $state(0);
 
+	onMount(async () => {
+		const event_id = new URLSearchParams(window.location.search).get('id');
+		if (!event_id) {
+			loading = false;
+			return;
+		}
+
+		const { data: event } = await data.supabase
+			.from('events')
+			.select('*')
+			.eq('id', event_id)
+			.single();
+		event_data = event;
+
+		const { data: parts } = await data.supabase
+			.from('participants')
+			.select('*, scanned_by:profiles (id, display_name)')
+			.eq('event', event_id);
+		participants = parts || [];
+		scannedCount = participants.filter((p) => p.scanned).length;
+		notScannedCount = participants.length - scannedCount;
+		loading = false;
+	});
 </script>
 
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
 
 <div class="mb-2 rounded border border-gray-300 bg-white p-4">
 	<div class="flex flex-col gap-1">
-		<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
-		<span class="text-black-500 text-sm">{data.event_data.date}</span>
+		{#if loading}
+			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
+			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
+		{:else}
+			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
+			<span class="text-black-500 text-sm">{event_data?.date}</span>
+		{/if}
 	</div>
 </div>
 
@@ -26,7 +59,11 @@
 		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 		</svg>
+		{#if loading}
+			<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
+		{:else}
 			<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
+		{/if}
 	</div>
 	<div class="mx-4 h-8 w-px bg-gray-300"></div>
 	<div class="flex flex-1 items-center justify-center gap-2">
@@ -41,15 +78,30 @@
 			<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
 			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
 		</svg>
+		{#if loading}
+			<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
+		{:else}
 			<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
+		{/if}
 	</div>
 </div>
 
 <div class="rounded border border-gray-300 bg-white p-4">
-	<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
+	<h2 class="mb-2 rounded text-xl font-bold">
+		{#if loading}
+			<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
+		{:else}
+			Participants ({participants.length})
+		{/if}
+	</h2>
 	<ul class="space-y-1">
-		{#each data.participants as p}
-			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+		{#if loading}
+			<li>
+				<div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
+			</li>
+		{:else}
+			{#each participants as p}
+				<li class="flex items-center gap-2 border-b border-gray-300 pb-1 last:border-b-0">
 					{#if p.scanned}
 						<svg
 							title="Scanned"
@@ -78,7 +130,7 @@
 					<span class="font-semibold">{p.name} {p.surname}</span>
 					<span class="flex-1"></span>
 					{#if p.scanned_by}
-					<div class="flex flex-row items-end ml-2">
+						<div class="ml-2 flex flex-row items-end">
 							<span class="mr-1 text-xs text-gray-500">
 								{new Date(p.scanned_at).toLocaleTimeString([], {
 									hour: '2-digit',
@@ -91,5 +143,6 @@
 					{/if}
 				</li>
 			{/each}
+		{/if}
 	</ul>
 </div>