Components are not ready to render on page load.

[twoco]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

The components are not ready on page load what results in flashing components on e.g. route change. Is there a way to wait until hydrated?

In which browser(s) did the problem occur?

Chrome

Steps To Reproduce

1. Create a SvelteKit project and add SvelteUI.
2. Create buttons in e.g. +layout.svelte.
3. Change route and see flashing buttons.

Normal Speed	Slow Motion

You see that the buttons are not reader and loaded with delay. This results in flashing components, layout shifting, etc.

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

[twoco]

Ok, I see that this issue does not appear when using SSR.

src/hooks.server.ts

import { prepareStylesSSR } from '@svelteuidev/core';

export const handle = prepareStylesSSR;

We can close this if this is the solution. But if this should also work without SSR handle that is maybe a bug?

[BeeMargarida]

For SSR this is the only way for now, since it's necessary to add the CSS styles to the page before JS loads, so the hooks is required. Are you saying that this is happening when not using SSR?

[twoco]

I think I just missed prepareStylesSSR. It's ok. Thanks.