`ClientOnly` fallback

[oblique jasper]

I found this code for a client that only runs on the clientts function ClientOnly(props: { children: JSX.Element }) { const [ getRender, setRender ] = createSignal() onMount(() => setRender(() => props.children)) return getRender as any as JSX.Element }but how can I get it to render a fallback?

[regal fossil]

you can modify the implementation like this:

function ClientOnly(props: { children: JSX.Element, fallback?: JSX.Element }) {
    const [mounted, setMounted] = createSignal(false)
    onMount(() => setRender(true))
    return <Show when={mounted()} fallback={props.fallback}>{props.children}</Show>
}

or use isHydrated from solid-primitives to do this anywhere:

return <>{isHydrated() ? <Client/> : <Fallback/>}</>

https://primitives.solidjs.community/package/lifecycle#ishydrated

you may want to combine clientonly with lazy and Suspense for code splitting too

[oblique jasper]

oo isHydrated() is cool, thanks

what advantages does code splitting have in this context?