global player pt. 5 client only

src/lib/components/util/ClientOnly.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	type ClientOnlyProps = {
+		/**
+		 * If true, render `fallback` content until the component mounts on the client.
+		 * Defaults to true.
+		 */
+		showFallback?: boolean;
+
+		/**
+		 * Main content to render once mounted (client-only).
+		 */
+		children: import("svelte").Snippet;
+
+		/**
+		 * Optional fallback content to render during SSR / before mount.
+		 */
+		fallback?: import("svelte").Snippet;
+	};
+
+	let { showFallback = true, children, fallback }: ClientOnlyProps = $props();
+
+	let mounted = $state(false);
+
+	onMount(() => {
+		mounted = true;
+	});
+</script>
+
+{#if mounted}
+	{@render children()}
+{:else if showFallback && fallback}
+	{@render fallback()}
+{/if}