Lazily imported components suffer from FOUC #5137
Description
Describe the bug
A useful pattern is to dynamically import a component inside a load function:
<script context="module">
export async function load({ params }) {
return {
props: {
Thing: params.thing = 'this'
? (await import('$lib/ThisThing.svelte')).default
: (await import('$lib/ThatThing.svelte')).default
}
};
}
</script>
<script>
export let Thing;
</script>
<Thing/>The problem is that results in FOUC, because SvelteKit only injects CSS for static dependencies when server-side rendering. The styles don't appear until the component is imported.
Reproduction
Logs
No response
System Info
latestSeverity
serious, but I can work around it
Additional Information
No response