title: How do you add a loading GIF spinner before AOI response in vanilla javascript?
body: <p>So far I've tried using the let method make the GIF a constant and attempting to switch display type is js style function. Can someone guide me into displaying GIF image before API response and hiding it when fetch() is processed.</p>
  <p><code>Html</code></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./doggos.css&quot;&gt;
    &lt;title&gt;Dogs&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Doggos&lt;/h1&gt;
    &lt;button class=&quot;add-doggo&quot;&gt;Add Doggo&lt;/button&gt;
    &lt;div class=&quot;doggos&quot;&gt;
      &lt;div class=&quot;loader&quot;&gt;&lt;img src=&quot;./giphy (1).gif&quot;&gt;&lt;/img&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src=&quot;./doggos.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><code>Javascript</code></p>
  <pre><code>const DOG_URL = &quot;https://dog.ceo/api/breeds/image/random&quot;;
  
  const doggos = document.querySelector(&quot;.doggos&quot;);
  
  function addNewDoggo() {
      const promise = fetch(DOG_URL);
      promise
          .then(function(response) {
              const processingPromise = response.json(); //This line of code parses the API response into a usuable js object
              return processingPromise; //this code returns a new promise and this process is called | PROCESS-CHAINING
          })
  
          .then(function(processedResponse) {
              const img = document.createElement(&quot;img&quot;);
              img.src = processedResponse.message;
              img.alt = &quot;Cute doggo&quot;;
              doggos.appendChild(img);
          });
  }
  
  document.querySelector(&quot;.add-doggo&quot;) .addEventListener(&quot;click&quot;, addNewDoggo)
  </code></pre>