'How do you add a loading GIF spinner before AOI response in vanilla javascript?

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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./doggos.css">
  <title>Dogs</title>
</head>

<body>
  <h1>Doggos</h1>
  <button class="add-doggo">Add Doggo</button>
  <div class="doggos">
    <div class="loader"><img src="./giphy (1).gif"></img></div>
  </div>

  <script src="./doggos.js"></script>
</body>

</html>

Javascript

const DOG_URL = "https://dog.ceo/api/breeds/image/random";

const doggos = document.querySelector(".doggos");

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("img");
            img.src = processedResponse.message;
            img.alt = "Cute doggo";
            doggos.appendChild(img);
        });
}

document.querySelector(".add-doggo") .addEventListener("click", addNewDoggo)
javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions