-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamically imported components gets their css delayed #967
Comments
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? |
@acoyfellow Both prod and dev flickers for me. it only flickers on refresh, when navigating through links it works fine (presumably because prefetch) |
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 |
@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.movso 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. |
I can confirm the delay on Windows 10 Chrome 89 with sveltekit 74 init default. It's really visible. |
This is only present in production builds now, since dev inlines all css. |
I had same problem and resolve it in another compiler stack: #2349 (comment) |
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 |
As of v360, this problem is now fixed it seems! Thanks a lot Rich :) |
Interestingly the CSS of all dynamic components gets loaded from the initial page. |
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? |
@keehun I'm not seeing any problem with the loading of the css on the website you linked. |
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 |
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
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.
The text was updated successfully, but these errors were encountered: