refactor ClientOnly component to simplify a bit

This commit is contained in:
2026-02-07 21:13:15 -08:00
parent 6f36ec0c62
commit 7b8ccb0e83

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import type { Snippet } from "svelte";
import { browser } from "$app/environment";
type ClientOnlyProps = { type ClientOnlyProps = {
/** /**
@@ -11,24 +12,18 @@
/** /**
* Main content to render once mounted (client-only). * Main content to render once mounted (client-only).
*/ */
children: import("svelte").Snippet; children: Snippet;
/** /**
* Optional fallback content to render during SSR / before mount. * Optional fallback content to render during SSR / before mount.
*/ */
fallback?: import("svelte").Snippet; fallback?: Snippet;
}; };
let { showFallback = true, children, fallback }: ClientOnlyProps = $props(); let { showFallback = true, children, fallback }: ClientOnlyProps = $props();
let mounted = $state(false);
onMount(() => {
mounted = true;
});
</script> </script>
{#if mounted} {#if browser}
{@render children()} {@render children()}
{:else if showFallback && fallback} {:else if showFallback && fallback}
{@render fallback()} {@render fallback()}