<!--
	Loading skeleton for photo grids. Renders a small fixed batch of
	pulsing tiles in the same column track as the real grid so the layout
	doesn't shift when data arrives. Used on initial load only — the
	infinite-scroll "Loading more…" sentinel at the bottom of the timeline
	is a different signal and stays as text.
-->
<script lang="ts">
	import { view } from '$lib/stores/view.svelte';

	interface Props {
		/** Number of skeleton tiles. Default ~first-viewport-worth. */
		count?: number;
		/** Override the column template (matches the real grid's CSS). */
		columns?: string;
	}
	let { count = 20, columns }: Props = $props();
	const tracks = $derived(
		columns ?? `repeat(auto-fill, minmax(${view.thumbnailSize}px, 1fr))`
	);
</script>

<div
	aria-hidden="true"
	class="grid gap-2"
	style="grid-template-columns: {tracks};"
>
	{#each Array.from({ length: count }) as _, i (i)}
		<div class="aspect-square animate-pulse rounded-md bg-secondary"></div>
	{/each}
</div>
