Hasta ahora, he intentado usar el método let para hacer que el GIF sea constante e intentar cambiar el tipo de visualización es la función de estilo js. ¿Puede alguien guiarme para mostrar la imagen GIF antes de la respuesta de la API y ocultarla cuando se procesa fetch ()?
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)