<script>
    import '../app.pcss';
    import { loading } from '$lib/stores.js';
    import { Fa } from 'svelte-fa';
    import { faSpinner } from '@fortawesome/free-solid-svg-icons';

    let { children } = $props();
</script>

<div class="bg-gray-200">
    {@render children?.()}
    {#if $loading}
        <div class="absolute bottom-4 right-4 spin">
            <Fa size={'2x'} icon={faSpinner}></Fa>
        </div>
    {/if}
</div>

<style lang="postcss">
    .spin {
        animation: spin 2s infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg) }
        50% { transform: rotate(360deg) }
        100% { transform: rotate(720deg) }
    }
</style>