Avoiding flash of unstyled content

Aktualisiert: 29. Okt 2018

Loading a landing page sometimes displays a flash of unstyled content. This mostly happens if the loading of the styles is slow, due to connection speed etc.

Most common trick that people use is hiding the html before loading and showing it again using a Javascript or JQuery function. This approach is problematic if the user has no Javascript enabled. Also my app was written in react, so I didn’t wanna litter my index.html with a javascript function just for loading my page.

So an easy trick that worked for me was with css:

  • Add the css style to hide html in your index.html before the stylesheet link:

CSS style to hide HTML (in index.html)

At the top of your css stylesheet add the css style to display the html again:

CSS style to display HTML again (in stylesheet)

This will hide your whole html until the stylesheet loads and your loaded stylesheet will then display the html again. That will make sure user doesn’t see any unstyled html between those loading times.

Nicole Hiller  |  Nana Janashia

Mail: info@nnsoftware.at

©2018 by nnSoftware