title: Delay parent component render till all the child components render reactjs
body: <p>I am a beginner to react. I am rendering the a component A. This component has 5 more sub components in it. Each of them is requesting an API and loading the information from the api. I want to display a loading symbol, till all the responses are received and rendered. I am really not sure how actually to perform this operation. For example: </p>
  
  <pre><code>class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: getCookie("Authorization") ? true : false,
      loading: true
    };
  }
  
  componentDidMount() {
    this.setState({ loading: false });
  }
  
  render() {
    document.body.style = "background: #fafafa;";
    if (this.state.isLoggedIn) {
      return (
        &lt;div&gt;
          {this.state.loading ? &lt;Loading /&gt; : ""}
          &lt;Child1 /&gt;
          &lt;Child2 /&gt;
          &lt;Child3 /&gt;
          Welcome Home, user
        &lt;/div&gt;
      );
    } else {
      // User not logged, error
      return &lt;Redirect to="/login" /&gt;;
    }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I want to show a loading symbol, till all the child elements are rendered. The present code does not work properly. IS there any way to perform this ?</p>