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
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.
