Skip to content
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

Flashes of no CSS or unstyled webpage on load #636

Closed
iamrommel opened this issue Jun 3, 2018 · 4 comments
Closed

Flashes of no CSS or unstyled webpage on load #636

iamrommel opened this issue Jun 3, 2018 · 4 comments
Labels

Comments

@iamrommel
Copy link

Whenever i load the page, there is a quick flash of un-styled document, and then suddenly (after 1 second) it will load the correct style. I did a quick look for the main html that is being rendered dont have that assests.client.css

What is want is no flashes of unstyled webpage just like the old times. Or maybe im doing wrong with my code (see teh attached image)

image

@iamrommel iamrommel changed the title Flashes of no CSS on load. Flashes of no CSS or unstyled webpage on load Jun 3, 2018
@AndyArcherKG
Copy link

We have this issue to, are you lazy loading your pages? if so i think this is where the problem lies.
A feature of webpack4/mini-css-extract-plugin is to help with page load by only loading the css when its "needed". Even in the current razzle setup where they chunk it all into one thing. Webpack still sees this as a chunk rather than an actual bundle from what i can tell. As such it wont include it in the assets.json which is where that condition in your screenshot is looking at.
If you go into build/assets.json there you will only see your js file referenced but not your css file even though its one big file.

Steps to reproduce the error:

  1. have a lazy loaded route page with styles included (that you want ssr'ed)
  2. run the build
  3. check build/assets.json it doesnt show the css file.
  4. npm run start:prod and check the browser you'll see the FOUC.

@stale
Copy link

stale bot commented Aug 15, 2018

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

@stale stale bot added the stale label Aug 15, 2018
@stale
Copy link

stale bot commented Aug 22, 2018

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

@stale stale bot closed this as completed Aug 22, 2018
@david-potgieter
Copy link
Contributor

Came here with same issue, solution here: #307

FOUC only during dev...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants