Bundled scss: flash of unstyled content (FOUC) in chrome

[learosema]

When I try out the example app, I sometimes see a FOUC in Chrome: when the page loads, the components are rendered before the css is loaded. This causes the components to appear unstyled for a short moment. You may have to stroke F5 multiple times to see this effect.

I've only experienced this effect in Chrome, other browsers I tried (Firefox, Edge) do fine.

[coryhouse]

Yes, this is the nature of how Webpack works. Here's what's happening.

That said, you make a good point on the FOUC. To avoid it, Webpack's extractTextPlugin can generate a separate css file for the production build (run via npm run build).

To clarify, the build script doesn't currently do so, so I'll look into making that happen.

[coryhouse]

Just committed a change for this. Now generating a separate css for the prod build. Thanks for the heads up!