fix: FOUC #427
fix: FOUC #427
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 0adec32:
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| // avoid HMR flash by first applying the new and removing the old styles | ||
| if (style) { | ||
| queueMicrotask(style.remove); | ||
| } |
There was a problem hiding this comment.
I was wondering why you queued style.remove function?
There was a problem hiding this comment.
So we do not have a FOUC in HMR, if we don't do this, styles will be removed, for a small bit of time, there are no styles until the new script tag applies the new styles. By queuing, we first apply the new script styles and then after that we remove the old styles.
|
Thank you
I don't on my system! Is it still there? |
|
@Aslemammad Yeah, as I tried, the Can anyone else try? |
Have u tried linking waku or updating it in the website directory? since the version is fixed there! Let me know |
|
Ah, that's it. I forgot. |
part of #344
Since the style scripts are modules, they run after the HTML parse phase, which causes the styles to flash.
What I do in this PR, is I get the styles and I inject them as normal style tags in the first load and then for HMR, later they'll be removed automatically.
Why not script tags?
The module type of the script tags and them importing things is limiting and won't let me to use blocking script tags.
blocking:
non-blocking:
And since the client-transformed CSS (that supports HMR) in vite is a JS module, we cannot use normal script tags. What can be done is server-transforming CSS, so we get the transformed plain CSS and then inject it in the style tags.
I also remove the spinner.