added loading spinner on links page

frontend/src/routes/(app)/links/+page.server.ts

@@ -27,7 +27,7 @@ export const load = (async (event) => {
 		}
 	}
 
-	const shorteners = await db.query.shortener.findMany({
+	const shorteners = db.query.shortener.findMany({
 		with: {
 			visitor: true,
 			project: true,
@@ -47,5 +47,10 @@ export const load = (async (event) => {
 		where: (settings, { eq }) => eq(settings.userId, user.id),
 	})
 
-	return { shorteners, projects, selected_project, settings }
+	return {
+		shorteners,
+		projects,
+		selected_project,
+		settings,
+	}
 }) satisfies PageServerLoad

frontend/src/routes/(app)/links/+page.svelte

@@ -161,12 +161,18 @@
 	<AddShortenerDialog {dialogOpen} projects={data.projects} />
 </div>
 
-{#if data.shorteners.length > 0}
+{#await data.shorteners}
+	<div class="flex h-full w-full items-center justify-center">
+		<Loader2 class="animate-spin" />
+	</div>
+{:then shorteners}
+	{#if shorteners.length > 0}
 		<div class="flex flex-wrap gap-4 overflow-scroll p-4">
-		{#each data.shorteners as shortener}
+			{#each shorteners as shortener}
 				<Card.Root class="w-full max-w-[500px]">
 					<Card.Header>
-					<Card.Title class="flex items-center justify-between gap-2">
+						<Card.Title
+							class="flex items-center justify-between gap-2">
 							<div class="flex items-center gap-2">
 								<a
 									href={'https://' +
@@ -236,7 +242,8 @@
 											Edit
 										</DropdownMenu.Item>
 										<DropdownMenu.Item
-										on:click={() => openDeleteDialog(shortener.code)}
+											on:click={() =>
+												openDeleteDialog(shortener.code)}
 											class="text-destructive data-[highlighted]:bg-destructive">
 											Delete
 										</DropdownMenu.Item>
@@ -248,9 +255,10 @@
 				</Card.Root>
 			{/each}
 		</div>
-{:else}
+	{:else}
 		<div>No Data</div>
-{/if}
+	{/if}
+{/await}
 
 <Dialog.Root bind:open={editDialogOpen}>
 	<Dialog.Content class="sm:max-w-[425px]">