<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}
/>
