<script>
    import { pendingRequests } from './stores.js';

    let showSpinner = $state(false);
    let timer = null; // script-only handle, not reactive

    // Track pending request count and show spinner after 1s delay
    $effect(() => {
        const count = $pendingRequests;
        if (count > 0) {
            if (!timer) {
                timer = setTimeout(() => { showSpinner = true; }, 1000);
            }
        } else {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            showSpinner = false;
        }
    });
</script>

{#if showSpinner}
    <div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-sm">
        <div class="flex flex-col items-center p-8 bg-bg-card rounded-2xl shadow-xl border border-border">
            <div class="w-12 h-12 border-4 border-accent border-t-transparent rounded-full animate-spin"></div>
            <p class="mt-4 text-text-primary font-medium tracking-wide animate-pulse">Communicating with Device...</p>
        </div>
    </div>
{/if}
