added loading icon on shortener card qr code button

main
TZGyn 1 year ago
parent 4a9e0d6b13
commit 04ecbfdad5
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A

@ -16,6 +16,7 @@
MoreVertical, MoreVertical,
QrCode, QrCode,
TrashIcon, TrashIcon,
Loader2Icon,
} from 'lucide-svelte' } from 'lucide-svelte'
import DeleteShortenerDialog from './DeleteShortenerDialog.svelte' import DeleteShortenerDialog from './DeleteShortenerDialog.svelte'
import EditLinkPage from '$lib/../routes/(app)/dashboard/links/[id]/edit/+page.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) => { const showQRModal = async (e: MouseEvent) => {
isLoadingQrModal = true
const { href } = e.currentTarget as HTMLAnchorElement const { href } = e.currentTarget as HTMLAnchorElement
if (innerWidth < 640) goto(href) if (innerWidth < 640) goto(href)
@ -78,6 +81,7 @@
} else { } else {
goto(href) goto(href)
} }
isLoadingQrModal = false
} }
const hostDomain = 'https://' + shortener.link.split('/')[2] const hostDomain = 'https://' + shortener.link.split('/')[2]
@ -167,7 +171,11 @@
)} )}
href={`${getUrl()}/links/${shortener.code}/qr`} href={`${getUrl()}/links/${shortener.code}/qr`}
on:click|preventDefault={showQRModal}> on:click|preventDefault={showQRModal}>
<QrCode size={20} /> {#if isLoadingQrModal}
<Loader2Icon size={20} class="animate-spin" />
{:else}
<QrCode size={20} />
{/if}
</a> </a>
<Separator orientation="vertical" /> <Separator orientation="vertical" />
{#if shortener.ios} {#if shortener.ios}

@ -12,6 +12,7 @@
BarChart, BarChart,
EditIcon, EditIcon,
ExternalLink, ExternalLink,
Loader2Icon,
MoreVertical, MoreVertical,
QrCode, QrCode,
TrashIcon, TrashIcon,
@ -52,7 +53,9 @@
} }
} }
let isLoadingQrModal = false
const showQRModal = async (e: MouseEvent) => { const showQRModal = async (e: MouseEvent) => {
isLoadingQrModal = true
const { href } = e.currentTarget as HTMLAnchorElement const { href } = e.currentTarget as HTMLAnchorElement
if (innerWidth < 640) goto(href) if (innerWidth < 640) goto(href)
@ -64,6 +67,7 @@
} else { } else {
goto(href) goto(href)
} }
isLoadingQrModal = false
} }
const hostDomain = 'https://' + shortener.link.split('/')[2] const hostDomain = 'https://' + shortener.link.split('/')[2]
@ -155,7 +159,11 @@
)} )}
href={`/dashboard/projects/${selected_project.uuid}/links/${shortener.code}/qr`} href={`/dashboard/projects/${selected_project.uuid}/links/${shortener.code}/qr`}
on:click|preventDefault={showQRModal}> on:click|preventDefault={showQRModal}>
<QrCode size={20} /> {#if isLoadingQrModal}
<Loader2Icon size={20} class="animate-spin" />
{:else}
<QrCode size={20} />
{/if}
</a> </a>
{#if shortener.ios} {#if shortener.ios}
<Tooltip.Root> <Tooltip.Root>

Loading…
Cancel
Save