22 lines
473 B
Svelte
22 lines
473 B
Svelte
<script lang="ts">
|
|
type ImageStatus = 'loading' | 'loaded' | 'error';
|
|
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
|
|
let { src, ...props }: HTMLImgAttributes = $props();
|
|
let status: ImageStatus = $state('loading');
|
|
</script>
|
|
|
|
{#if status === 'loading'}
|
|
<div class="h-full w-full animate-pulse bg-gray-800"></div>
|
|
{/if}
|
|
|
|
<img
|
|
{src}
|
|
hidden={status === 'loading'}
|
|
onload={() => {
|
|
status = 'loaded';
|
|
}}
|
|
onerror={() => (status = 'error')}
|
|
{...props}
|
|
/>
|