React - Display Loading Screen While Dom Is Rendering?
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 Thing...
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 thing with React because if I make loading screen rendered by React component, it doesn't display while page is loading because it has to wait for DOM rendered before.
Updated:
I made an example of my approach by putting screen loader in index.html and remove it in React componentDidMount() lifecycle method.
24 Answers
Must Read
The goal
When the html page is rendered, display a spinner immediately (while React loads), and hide it after React is ready.
Since the spinner is rendered in pure HTML/CSS (outside of the React domain), React shouldn't control the showing/hiding process directly, and the implementation should be transparent to React.
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
