<!--
	Tiny "Loading…" indicator: spinner + label. Use this for in-flight queries
	in sidebars, popovers, and right rails. For the initial photo-grid load,
	use SkeletonGrid instead (layout-preserving).
-->
<script lang="ts">
	import { Loader2 } from 'lucide-svelte';

	interface Props {
		label?: string;
		size?: 'sm' | 'default';
		align?: 'left' | 'center';
		srOnly?: boolean;
		polite?: boolean;
	}

	let {
		label = 'Loading…',
		size = 'default',
		align = 'left',
		srOnly = false,
		polite = true
	}: Props = $props();

	const textSize = $derived(size === 'sm' ? 'text-[11px]' : 'text-xs');
	const iconSize = $derived(size === 'sm' ? 'h-3 w-3' : 'h-3.5 w-3.5');
	const padding = $derived(size === 'sm' ? 'px-3 py-2' : 'px-3 py-2');
	const justify = $derived(align === 'center' ? 'justify-center' : 'justify-start');
</script>

<p
	role="status"
	aria-busy="true"
	aria-live={polite ? 'polite' : 'off'}
	class="flex items-center gap-1.5 {padding} {textSize} {justify} text-muted-foreground"
>
	<Loader2 class="{iconSize} animate-spin" aria-hidden="true" />
	<span class={srOnly ? 'sr-only' : ''}>{label}</span>
</p>
