React 19. Generate a component to avoid FOUC

[o-alexandrov]

Summary

React 19 adds support for loading stylesheets in a specified order AND ability to wait using Suspense wrapper until CSS is loaded.

Please consider to:

• generate a component wrapper to at least the main css bundle and ideally wrap dynamically imported pages with a separate Suspense with a list of CSS files that would be imported in the dynamically imported page

Examples

• Link to React’s docs on this topic
• Video on YouTube describing it (starts on 29:27)

Motivation

Disable FOUC when needed

Search keywords: react 19 fouc suspense

[oliviertassinari]

This sounds similar to #81. But I don't understand the problem, Why would there be a FOUC today?

[o-alexandrov]

There is FOUC with PigmentCSS atm because the CSS files, generated by PigmentCSS, might not be loaded at the time of the rendering the HTML which uses the styles from the loading css files.

React 19 allows to wait for the generated CSS files to load

[oliviertassinari]

enerated by PigmentCSS, might not be loaded at the time of the rendering the HTML which uses the styles from the loading css files.

@o-alexandrov CSS files should be loaded as blocking resources in our case, so shouldn't happen. How can we reproduce? Is this vercel/next.js#62940 that Next.js fixed recently?

[o-alexandrov]

I think it applies to all bundlers, but I use vite. Simplest way to reproduce is probably building a project and running throttling to 3G with Disable cache option set to true in DevTools.

I'll test once more, when #9 (global styles are possible) and #92 (theming is documented); maybe, my current FOUC issue is due to emotion in @mui/material@v6-alpha.

[brijeshb42]

Yeah. FOUC should not be there when using Pigment in a project not using any runtime css-in-js. Pigment CSS offloads the css loading responsibility to the bundler. So a page's css should already have been loaded before the UI shows up.
It'll be helpful if you can share a minimal reproduction of the issue when also using @mui/material.

[o-alexandrov]

Yes, thank you. Let me please create a minimal example once emotion is removed on the CSS-in-JS side from @mui/material. Or, hopefully, I’ll just report there’s no FOUC, if the current issue happens due to emotion