Spaces:
Running
Running
File size: 1,025 Bytes
c6afb12 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script lang="ts">
import type { Snippet } from 'svelte';
import { prefersReducedMotion } from 'svelte/motion';
import { fade } from 'svelte/transition';
import { Spinner } from '$lib/components/ui/spinner';
type Props = {
children: Snippet;
url: string;
loading?: boolean;
};
let { children, url, loading = false }: Props = $props();
const fadeDuration = $derived(prefersReducedMotion.current ? 0 : 200);
</script>
<div class="relative min-h-[calc(100dvh-var(--app-header-height))]" aria-busy={loading}>
{#key url}
<div
class="flex min-h-[calc(100dvh-var(--app-header-height))] flex-col"
in:fade={{ duration: fadeDuration }}
>
{@render children?.()}
</div>
{/key}
{#if loading}
<div
class="fixed inset-x-0 bottom-0 z-40 flex items-center justify-center bg-background/70 backdrop-blur-[2px]"
style:top="var(--app-header-height)"
in:fade={{ duration: fadeDuration }}
out:fade={{ duration: fadeDuration }}
>
<Spinner class="size-8 text-primary" />
</div>
{/if}
</div>
|