El consejo anterior que me dieron fue iniciar el cargador antes de obtener los datos en la función addNewDoggo y agregar un detector de eventos para detener el cargador una vez que se procesan los datos. No aparece ningún cargador al obtener datos, ¿alguien puede decirme por qué?
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> JS
const DOG_URL = "https://dog.ceo/api/breeds/image/random"; const doggos = document.querySelector(".doggos"); function addNewDoggo() { let loader = document.querySelector(".loader"); 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) document.addEventListener('load', function() { loader.style.display = 'none'; })Debe leer los documentos sobre lo que significa el evento de carga : se refiere a la carga de los recursos de la página y no a una promesa que haya iniciado. Inicie sesión dentro del cuerpo de su oyente de eventos para mostrar cuando haya terminado.
Necesitará una solución diferente para lo que está tratando de lograr. Hay muchas preguntas similares .