Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142<script lang="ts"> import { browser } from "$app/environment"; import type { Snippet } from "svelte"; import Delayed from "./Delayed.svelte";
interface Props { /** omit to fill in silently, the boundary still owns the suspension */ skeleton?: Snippet; /** ms to wait before painting the skeleton, 0 because a navigation commits in ~36ms */ delay?: number; /** without it the error propagates to the nearest +error.svelte */ failed?: Snippet<[error: unknown]>; children: Snippet; }
let { skeleton, delay = 0, failed: failedProp, children }: Props = $props();</script>
<!-- keep the browser check, svelte throws the real children away on ssr if pending is set --><!-- failed has to be a direct child of the boundary to register as its snippet -->{#if failedProp} <svelte:boundary pending={browser ? gated : undefined}> {@render children()} {#snippet failed(error: unknown)} {@render failedProp(error)} {/snippet} </svelte:boundary>{:else} <svelte:boundary pending={browser ? gated : undefined}> {@render children()} </svelte:boundary>{/if}
<!-- a skeleton that lives 66ms never passes ~55% opacity, so it needs no minimum display time -->{#snippet gated()} {#if skeleton} <Delayed ms={delay}> {@render skeleton()} </Delayed> {/if}{/snippet}