From 8dfb34d6f7cbdc8b11a58436611f13a34a489701 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 24 Feb 2024 15:24:13 +0800
Subject: [PATCH] added loading icon to preview on shortener create

---
 .../(app)/links/(component)/AddShortenerDialog.svelte    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/(app)/links/(component)/AddShortenerDialog.svelte b/frontend/src/routes/(app)/links/(component)/AddShortenerDialog.svelte
index dd7d040..a4a5e63 100644
--- a/frontend/src/routes/(app)/links/(component)/AddShortenerDialog.svelte
+++ b/frontend/src/routes/(app)/links/(component)/AddShortenerDialog.svelte
@@ -32,14 +32,17 @@
 
 	let inputTimer: any
 	let data: any
+	let isPreviewLoading: boolean = false
 
 	const getMetadata = async () => {
+		isPreviewLoading = true
 		clearTimeout(inputTimer)
 		inputTimer = setTimeout(async () => {
 			const response = await fetch(
 				`/api/url/metadata?url=${inputLink}`,
 			)
 			data = await response.json()
+			isPreviewLoading = false
 			console.log(data)
 		}, 1000)
 	}
@@ -72,7 +75,11 @@
 				<div class="font-bold">Preview</div>
 				<div class="col-span-4 flex flex-col justify-center border">
 					<div class="relative h-64 overflow-hidden">
-						{#if data}
+						{#if isPreviewLoading}
+							<div class="flex h-full items-center justify-center">
+								<Loader2 class="animate-spin" />
+							</div>
+						{:else if data}
 							<img
 								src={data.image}
 								alt=""