React - Display loading screen while DOM is rendering?

Question

This is an example from Google Adsense application page. The loading screen displayed before the main page showed after.

I don\'t know how to do the same th

Answer 1

When your React app is massive, it really takes time for it to get up and running after the page has been loaded. Say, you mount your React part of the app to #app. Usually, this element in your index.html is simply an empty div:

What you can do instead is put some styling and a bunch of images there to make it look better between page load and initial React app rendering to DOM:

  

    
  
  

    Hold on, it's loading!
  

After the page loads, user will immediately see the original content of index.html. Shortly after, when React is ready to mount the whole hierarchy of rendered components to this DOM node, user will see the actual app.

Note class, not className. It's because you need to put this into your html file.

---

If you use SSR, things are less complicated because the user will actually see the real app right after the page loads.