check if stylesheet is loaded then render elements

[frntendev]

Hello, I'm developing universal react application using react, redux, react-router and react-helmet. Each page in my application has seperated stylesheet. When routes change in client side, at first, the elements have no style yet. and for a few milliseconds, my page gets ugly! I want a solution for this problem . How can I know when stylesheet loaded?

[khtdr]

if you put your content in a div with display set to none, then in the stylesheet, override that and set display to block or something. That might get you what you want in the meantime

[richyrb00]

@Sepehr-Aliakbary70

This isn't an issue for within Helmet but with react itself, react is loaded as javascript. so your dom will load first before styling and scripts that are stored within react.

The best solution for this is to output all the styling as a CSS file. You haven't specified if you are using gulp, webpack etc but when you build your react app for production environment, create a script that will do this for you and then reference it in the index header..

you should find this resolves your issue.