From 48aa85b2845b2203b82d99afd98f1b870e355ae4 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 17 Mar 2024 05:01:18 +0800
Subject: [PATCH] added skeleton loading to links page

---
 .../src/lib/components/ui/skeleton/index.ts   |  7 +++++
 .../components/ui/skeleton/skeleton.svelte    | 11 ++++++++
 frontend/src/routes/(app)/links/+page.svelte  | 26 ++++++++++++++++---
 3 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/skeleton/index.ts
 create mode 100644 frontend/src/lib/components/ui/skeleton/skeleton.svelte

diff --git a/frontend/src/lib/components/ui/skeleton/index.ts b/frontend/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..186db21
--- /dev/null
+++ b/frontend/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..09fb7cd
--- /dev/null
+++ b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index cef6c11..7b37ae8 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	import { Separator } from '$lib/components/ui/separator'
 	import { Button } from '$lib/components/ui/button'
 	import * as Dialog from '$lib/components/ui/dialog'
 	import * as Card from '$lib/components/ui/card'
@@ -28,6 +27,7 @@
 	import AddShortenerDialog from './(component)/AddShortenerDialog.svelte'
 	import { toast } from 'svelte-sonner'
 	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte'
+	import { Skeleton } from '$lib/components/ui/skeleton'
 
 	export let data: PageData
 
@@ -163,8 +163,15 @@
 </div>
 
 {#await data.shorteners}
-	<div class="flex h-full w-full items-center justify-center">
-		<Loader2 class="animate-spin" />
+	<div class="flex flex-wrap gap-4 p-4">
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
+		<Skeleton class="h-[150px] w-[500px] rounded-lg" />
 	</div>
 {:then shorteners}
 	{#if shorteners.length > 0}
@@ -259,7 +266,18 @@
 			</div>
 		</ScrollArea>
 	{:else}
-		<div>No Data</div>
+		<div class="flex h-full w-full items-center justify-center">
+			<div class="flex flex-col items-center gap-12">
+				<div class="flex flex-col items-center gap-4">
+					<div class="text-4xl font-bold">No Shortener Found</div>
+				</div>
+				<Button
+					on:click={() => {
+						dialogOpen = true
+					}}
+					class="w-fit">Add Shortener</Button>
+			</div>
+		</div>
 	{/if}
 {/await}