<script lang="ts">
	let { lines = 3 } = $props<{ lines?: number }>();
</script>

<div class="space-y-3">
	{#each Array(lines) as _, i}
		<div class="loading-bar" style="animation-delay: {i * 100}ms;"></div>
	{/each}
</div>

<style>
	.loading-bar {
		height: 4rem;
		border-radius: 0.75rem;
		background: linear-gradient(90deg, var(--color-muted) 25%, var(--color-border) 50%, var(--color-muted) 75%);
		background-size: 200% 100%;
		animation: shimmer 1.5s ease-in-out infinite;
	}

	@keyframes shimmer {
		0% { background-position: -200% 0; }
		100% { background-position: 200% 0; }
	}
</style>
