yup-live-chrome-extension/src/components/ImgLoader.svelte

38 lines
698 B
Svelte

<script lang="ts">
import { isUrlInvalid } from '@/utils/misc';
export let source
let loading = true
let loaded = false
export const onLoad = () => {
loading = false
loaded = true
}
export const onError = () => {
loading = false
source = undefined
}
$: {
if(isUrlInvalid(source)) {
source = undefined
} else {
}
}
</script>
<div class="inline-flex {`${loading ? 'animate-pulse' :''}`}">
{#if loading || loaded}
<slot name="img">
</slot>
{:else if source === undefined}
<slot name="error">
</slot>
{/if}
<slot name="after">
</slot>
</div>