refactor ClientOnly component to simplify a bit
This commit is contained in:
@@ -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()}
|
||||||
|
|||||||
Reference in New Issue
Block a user