reactjsasynchronousreduxreact-dom

React - Display loading screen while DOM is rendering?

This is an example from the Google AdSense application page. The loading screen is displayed before the main page is shown.

enter image description here

I am not sure how to achieve the same effect with React because if I render the loading screen as a React component, it will not be displayed while the page is loading as it needs to wait for the DOM to be rendered first.

Updated:

As a solution, I tried an approach where I placed the screen loader in index.html file and removed it in the componentDidMount() lifecycle method of React component.

Example and react-loading-screen.

Solution

  • This could be done by placing the loading icon in your html file (index.html for example), so that users see the icon immediately after the html file has been loaded.

    When your app finishes loading, you could simply remove that loading icon in a lifecycle hook, I usually do that in componentDidMount.