These are approaches that i have seen or implemented.
**1. No global Loader needed in the first place -**
If each of your components can handle rendering even before data loaded, like use of a App Shell architechture as shown below. a loading shell of a facebook post would look like [![enter image description here][1]][1] Code
class Post extends React.Component { render() { return this.props.isLoading ? ( <div className="post">...</div> ) : ( <div className="post-shell"></div> ); } }

**2. Global loader**
Code
class App extends React.Component { render() { return this.props.isLoading ? ( <RootComponent {...props}> ) : ( <Loader /> ); } } where Loader component is an absolutely positioned loading icon/content. RootComponent is only mounted when data is loaded so that all props are having required data.
many projects don't have the luxury to the the former as the components are not written with corresponding shells. but since you are not constrained by time. The first approach gives the best UX.
Thanks to [Sagi_Avinash_Varma][2]

[1]: https://i.stack.imgur.com/hBbTY.gif [2]: https://stackoverflow.com/users/2904881/sagi-avinash-varma

Since your app is not coded yet, you can adopt better component structure. These are approaches that i have seen or implemented.
**1. No global Loader needed in the first place -**
If each of your components can handle rendering even before data loaded, like use of a App Shell architechture as shown below. a loading shell of a facebook post would look like [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/hBbTY.gif Code
class Post extends React.Component { render() { return this.props.isLoading ? ( <div className="post">...</div> ) : ( <div className="post-shell"></div> ); } }

**2. Global loader**
Code
class App extends React.Component { render() { return this.props.isLoading ? ( <RootComponent {...props}> ) : ( <Loader /> ); } } where Loader component is an absolutely positioned loading icon/content. RootComponent is only mounted when data is loaded so that all props are having required data.
many projects don't have the luxury to the the former as the components are not written with corresponding shells. but since you are not constrained by time. The first approach gives the best UX.