FOUC Off (Svelte) #svelte #fouc

fouc-off.svelte

<!-- This component disables CSS transitions until onMount fires, in order to avoid FOUC -->
<script lang="ts">
	import { tick } from 'svelte';

	// Adds 'mounted' class to body to signal that transitions should be enabled
	$effect(() => {
		tick().then(() => document.firstElementChild?.setAttribute('data-mounted', 'true'));
	});
</script>

<style>
	:global(html:not([data-mounted]), html:not([data-mounted]) *) {
		transition: none !important;
	}
</style>