title: Keep page loading until map is finished
body: <p>I have the following code, where I fetch an API and populate a container inside a function</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let forms = [];
  
  fetch('http://localhost:3000/getmenu')
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
          forms = favorites = data;
          showForms(forms);
      })
      .catch(console.log('catch'));
    
   function showForms(arrayForms) {
  container.innerHTML = '';
  arrayForms.map(
  ({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) =&gt; {
    container.innerHTML = `foo`
  }</code></pre>
  </div>
  </div>
  </p>
  <p>However, the page loads extremely fast but the results take a few seconds to show up.
  How can I keep the page in the loading state until the funciton is complete?</p>