title: ReactJS loading screen until API is called
body: <p>I have a table in which data is called from an API. However the table and the header loads first and I have to wait for the API data to load into the body. I want to implement a loading screen spinner until the data has been fetched and the page then renders Here is my code..</p>
  
  <p><strong>Content.js</strong></p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  class Content extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: [],
  
          }
      }
  
      componentDidMount() {
  
          axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&amp;order=market_cap_desc&amp;per_page=100&amp;page=1&amp;sparkline=true')
              .then(res =&gt; {
                  const data = res.data;
                  this.setState({  data: data})
              })
      }
  
  
      render() {
          return (
  
          &lt;div&gt;
              &lt;table border="1"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                      &lt;td&gt;Name&lt;/td&gt;
                      &lt;td&gt;Price&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {this.state.data.map((n) =&gt; {
                      return (
                          &lt;tr&gt;
                          &lt;td &gt;{n.name}&lt;/td&gt;
                          &lt;td&gt; {n.current_price} &lt;/td&gt;
                          &lt;/tr&gt;
                      );
                      })}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          );
      }
  }
  
  export default Content;
  </code></pre>
  
  <p>In my index.html file I have the code for the spinner</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!-- head --&gt;
  
   &lt;style&gt;
        .svgLoader {
          animation: spin 0.5s linear infinite;
          margin: auto;
        }
        .divLoader {
          width: 100vw;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      &lt;/style&gt;
  
  &lt;! -- body --&gt;
  
   &lt;div  id="root"&gt;
        &lt;div class="divLoader"&gt;
          &lt;svg class="svgLoader" viewBox="0 0 100 100" width="10em" height="10em"&gt;
            &lt;path stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#51CACC" transform="rotate(179.719 50 51)"&gt;&lt;animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"&gt;&lt;/animateTransform&gt;&lt;/path&gt;
          &lt;/svg&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This spinner works but how do I make it continue working until the API call is completed as the table loads without the data present for another few seconds</p>