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.

enter image description here

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.

Example and react-loading-screen.

Answer

This could be done by placing the loading icon in your html file (index.html for ex), 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.

以上是 React - Display loading screen while DOM is rendering? 的全部内容, 来源链接: utcz.com/a/24122.html

回到顶部