added loading icon to preview on shortener create

pull/3/head
TZGyn 2 years ago
parent 61ce4bd75e
commit 8dfb34d6f7
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A

@ -32,14 +32,17 @@
let inputTimer: any let inputTimer: any
let data: any let data: any
let isPreviewLoading: boolean = false
const getMetadata = async () => { const getMetadata = async () => {
isPreviewLoading = true
clearTimeout(inputTimer) clearTimeout(inputTimer)
inputTimer = setTimeout(async () => { inputTimer = setTimeout(async () => {
const response = await fetch( const response = await fetch(
`/api/url/metadata?url=${inputLink}`, `/api/url/metadata?url=${inputLink}`,
) )
data = await response.json() data = await response.json()
isPreviewLoading = false
console.log(data) console.log(data)
}, 1000) }, 1000)
} }
@ -72,7 +75,11 @@
<div class="font-bold">Preview</div> <div class="font-bold">Preview</div>
<div class="col-span-4 flex flex-col justify-center border"> <div class="col-span-4 flex flex-col justify-center border">
<div class="relative h-64 overflow-hidden"> <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 <img
src={data.image} src={data.image}
alt="" alt=""

Loading…
Cancel
Save