Dynamically imported components gets their css delayed

[rinti]

Describe the bug
When dynamically importing components like: await import('my-component.svelte').default the component gets server side rendered, but the css gets imported async with a preload helper, thus the code flickers until the css is loaded.

To Reproduce
I have a repro repo here with two links to a [slug] page where the component gets chosen depending on the slug (blue or red counter):
https://github.com/rinti/svelte-kit-dynamic-import
As you can see when building and starting production server, the html gets correctly rendered, but the css flickers.

Expected behavior
The relevant css should be inlined in tags

The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 20.92 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.1 - ~/.volta/tools/image/node/12.22.1/bin/node
    npm: 6.14.12 - ~/.volta/tools/image/node/12.22.1/bin/npm
  Browsers:
    Firefox Developer Edition: 88.0
    Safari: 14.0.2
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.71
    svelte: ^3.29.0 => 3.37.0
    vite: ^2.1.0 => 2.1.5

Using node adapter

Severity
I don't know how common my use case is, but for my use case it's pretty severe.

This might be a duplicate of #962, if so you can close this issue.

[acoyfellow]

I'm seeing a conditional component flicker in a new spot that I've not seen before.

But it isn't happening on dev: just prod. Is it both for you @rinti?

[rinti]

@acoyfellow Both prod and dev flickers for me. it only flickers on refresh, when navigating through links it works fine (presumably because prefetch)

[benmccann]

I can't see a flash of unstyled content in https://github.com/rinti/svelte-kit-dynamic-import. I think the pages are too simple. Even with the cache disabled it only takes me 3ms to load the files locally

[rinti]

@benmccann this is what i'm seeing: (this is soft refreshes, not hard refreshes which clears cache)

Screen.Recording.2021-04-13.at.09.18.32.mov

so as you can see the html is being ssr:ed correctly, but the css gets loaded after the page has loaded which causes flickering

edit: i just tested this in chrome and it's a lot less noticeable there. you have to hard refresh in chrome to see the flickers. the recording is using firefox developer edition.

[frederikhors]

I can confirm the delay on Windows 10 Chrome 89 with sveltekit 74 init default. It's really visible.

[rinti]

This is only present in production builds now, since dev inlines all css.

[subhendupsingh]

Still facing this issue on dev. This is my __layout.reset.svelte. This happens on pages inheriting this layout only.

[ildar-in]

I had same problem and resolve it in another compiler stack: #2349 (comment)

[f-elix]

I can confirm this is still happening, for me both in dev and production.

All the css related to a dynamically imported component is imported via a preload-helper, which causes some styles to appear only when js loads. It's very easy to reproduce by disabling the js on the page, in which preload-helper won't run and the css won't get loaded, even though the component appears just fine.

I can work around this by not using the <style> block in dynamically imported components and putting the styles in a global stylesheet, but it would be nice to have this fixed :)

[f-elix]

As of v360, this problem is now fixed it seems! Thanks a lot Rich :)

[PlopTheReal]

Interestingly the CSS of all dynamic components gets loaded from the initial page.
Is that an expected behavior? (1.0.0-next.370)

[offeex]

still not fixed

[keehun]

I'm still experiencing this with latest SvelteKit. You can see it at https://beta.omdex.org. I'm not using SASS/SCSS/PostCSS, etc. Using vanilla CSS in my components. I'm not even dynamically importing anything. Is there another issue or documentation page that I should be looking at?

[f-elix]

@keehun I'm not seeing any problem with the loading of the css on the website you linked.

[keehun]

Thanks @f-elix! I actually discovered the root of my issue. I had a very low-level component that managed the website layout. All of my routes/pages that needed the "standard look" would use that component to build its shell. Problem was, that low-level layout class had an {#if} at the root of it to handle the two different layouts I needed based on the props that were passed in. I split that component into two without that {#if}, and the layout shift stopped happening!