From 04ecbfdad53d74c1c502f3095943a31927af397c Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 17 Aug 2024 12:14:45 +0800
Subject: [PATCH] added loading icon on shortener card qr code button

---
 frontend/src/lib/components/ShortenerCard.svelte       | 10 +++++++++-
 .../projects/[id]/(components)/ShortenerCard.svelte    | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/ShortenerCard.svelte b/frontend/src/lib/components/ShortenerCard.svelte
index 2d3b925..771e017 100644
--- a/frontend/src/lib/components/ShortenerCard.svelte
+++ b/frontend/src/lib/components/ShortenerCard.svelte
@@ -16,6 +16,7 @@
 		MoreVertical,
 		QrCode,
 		TrashIcon,
+		Loader2Icon,
 	} from 'lucide-svelte'
 	import DeleteShortenerDialog from './DeleteShortenerDialog.svelte'
 	import EditLinkPage from '$lib/../routes/(app)/dashboard/links/[id]/edit/+page.svelte'
@@ -62,7 +63,9 @@
 		}
 	}
 
+	let isLoadingQrModal = false
 	const showQRModal = async (e: MouseEvent) => {
+		isLoadingQrModal = true
 		const { href } = e.currentTarget as HTMLAnchorElement
 
 		if (innerWidth < 640) goto(href)
@@ -78,6 +81,7 @@
 		} else {
 			goto(href)
 		}
+		isLoadingQrModal = false
 	}
 
 	const hostDomain = 'https://' + shortener.link.split('/')[2]
@@ -167,7 +171,11 @@
 					)}
 					href={`${getUrl()}/links/${shortener.code}/qr`}
 					on:click|preventDefault={showQRModal}>
-					<QrCode size={20} />
+					{#if isLoadingQrModal}
+						<Loader2Icon size={20} class="animate-spin" />
+					{:else}
+						<QrCode size={20} />
+					{/if}
 				</a>
 				<Separator orientation="vertical" />
 				{#if shortener.ios}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/ShortenerCard.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/ShortenerCard.svelte
index 0752a93..60280d9 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/ShortenerCard.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/ShortenerCard.svelte
@@ -12,6 +12,7 @@
 		BarChart,
 		EditIcon,
 		ExternalLink,
+		Loader2Icon,
 		MoreVertical,
 		QrCode,
 		TrashIcon,
@@ -52,7 +53,9 @@
 		}
 	}
 
+	let isLoadingQrModal = false
 	const showQRModal = async (e: MouseEvent) => {
+		isLoadingQrModal = true
 		const { href } = e.currentTarget as HTMLAnchorElement
 
 		if (innerWidth < 640) goto(href)
@@ -64,6 +67,7 @@
 		} else {
 			goto(href)
 		}
+		isLoadingQrModal = false
 	}
 
 	const hostDomain = 'https://' + shortener.link.split('/')[2]
@@ -155,7 +159,11 @@
 					)}
 					href={`/dashboard/projects/${selected_project.uuid}/links/${shortener.code}/qr`}
 					on:click|preventDefault={showQRModal}>
-					<QrCode size={20} />
+					{#if isLoadingQrModal}
+						<Loader2Icon size={20} class="animate-spin" />
+					{:else}
+						<QrCode size={20} />
+					{/if}
 				</a>
 				{#if shortener.ios}
 					<Tooltip.Root>