import { hydrated } from '$app/env';

[UltraCakeBakery]

Describe the problem

I want to know when the page has been hydrated and change my UI accordingly.

Describe the proposed solution

A writable store that by default has a value of false, and when the page has been fully hydrated, svelte-kit sets it to true.

<script>
	import { hydrated } from '$lib/stores'
</script>

{ #if $hydrated }
page is hydrated 🚀
{/if}

Alternatives considered

Custom implementation with my own store somewhere in $lib

<script>
	import { onMount } from 'svelte';
	import { hydrated } from '$lib/stores'

	onMount(() => { $hydrated = true })
</script>

{ #if $hydrated }
page is hydrated 🚀
{/if}

Importance

nice to have

Additional Information

No response

[babichjacob]

How would this behave differently from browser?

[UltraCakeBakery]

How would this behave differently from browser?

I assumed browser is true even before hydration..

EDIT: I see now that it is not. Maybe the docs could specify that it is false before hydration?

[babichjacob]

Oh, browser is true during hydration as well. Do you expect $hydrated to be true only after the DOM has been updated because of hydration? What can that help achieve that browser cannot?

[UltraCakeBakery]

Oh, browser is true during hydration as well. Do you expect $hydrated to be true only after the DOM has been updated because of hydration? What can that help achieve that browser cannot?

Yes.

We find it to be a good moment to start un-hidding ui features that depend on javascript being enabled and sveltekit to be fully loaded (no more layout shifts caused by svelte-kit loading components). We basically want to mark the application as ready based on it being hydrated, because we assume that when hydration is done all important first party files have loaded successfully and no fatal runtime errors have occurred.

[UltraCakeBakery]

Also, we have a simple debug menu that shows hydrated: true. We want that information to be more accurate 😅

[bluwy]

SvelteKit emits a sveltekit:start event after hydration. This is used for tests but it works here too, and with that we can create our own store like:

import { writable } from 'svelte/store'

let _hydrated = writable(false)

if (!import.meta.env.SSR) {
  window.addEventListener('sveltekit:start', () => _hydrated.set(true), { once: true })
}

export const hydrated = { subscribe: _hydrated.subscribe }

[Rich-Harris]

Hydration is synchronous — there is no 'during', only before and after. That might change in future (if we introduced some sort of non-blocking hydration) but even in that case the DOM changes would be committed synchronously. There's no version of hydrated that could mean something different than browser

[douglasward]

Just for reference: the sveltekit:start event was removed in #6484