patternreactCritical
React - Display loading screen while DOM is rendering?
Viewed 0 times
loadingscreendomwhilereactrenderingdisplay
Problem
This is an example from the Google AdSense application page. The loading screen is displayed before the main page is shown.
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
Example and react-loading-screen.
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 (
When your app finishes loading, you could simply remove that loading icon in a lifecycle hook, I usually do that in
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.Context
Stack Overflow Q#40987309, score: 151
Revisions (0)
No revisions yet.