title: React display loading animation for api call duration
body: <p>Currently I feel like the more I read about React, the less I understand.</p>
  <p>I am trying to solve this simple problem: During the data-fetching for my component, show a loading spinner.</p>
  <p>This is how I thought it would work:</p>
  <ol>
  <li><p>use State to monitor loading<br />
  <code>const [isLoading, setIsLoading] = useState(false);</code></p>
  </li>
  <li><p>use conditional rendering on this state<br />
  <code>return ({isLoading &amp;&amp; &lt;div&gt;I am loading&lt;/div&gt;});</code></p>
  </li>
  <li><p>setLoading when api call is started and reset it when a reponse arrived</p>
  <pre><code>useEffect(() =&gt; {
   const fetchData = async () =&gt; {
     let result;
     setIsLoading(true);    
     result = await api.get(URL);    // this takes 2000ms!
     setData(result.data);
     setIsLoading(false);
   };
  
   fetchData();
  },[api]);
  </code></pre>
  </li>
  </ol>
  <p>But, as the documentation says, <code>setState</code> is async and can be sent in batches. the network call takes 2 seconds, but I never see a loading animation.<br />
  So how do I do this?</p>
  <p>Edit: This is how you can do this. My error was somewhere else - the <code>setIsLoading(false)</code> was also in a different <code>useEffect</code>, which had the data as dependency. I had to wrap the entire logic inside that <code>useEffect</code> with <code>if(data)</code>, since on the first render, my data was undefined, but this still triggered the initial <code>useEffect</code>, probably like the old componentDidMount logic I guess - and the loading anim stopped way too soon.</p>