¿Cómo agrego un precargador cuando mi setTimeout está en NodeJS? A continuación se muestra el código para llamar a la API y establecer un retraso de 10 segundos:
function delay(s){ return new Promise(resolve => setTimeout(resolve,s)); } async function getXml(){ let ans; await delay(10000) const {data} = await axios.get('https://gist.githubusercontent.com/SwayamShah97/a3619c5828ac8ed8085c4ae295a855d9/raw/e4e372552e042bd8bd9e8ab87da93eb030114f86/people.xml'); xml2js.parseString(data, (err, result) => { if(err) { throw err; } ans = result });He intentado agregar el cargador usando frontend js así:
window.addEventListener("load", function () { const loader = document.querySelector(".loader"); loader.className += " hidden"; // class "loader hidden" });HTML:
<div class="loader"> <img src="/public/images/coffee-loading.gif" alt="Loading..." /> </div>CSS:
.loader.hidden { animation: fadeOut 10s; animation-fill-mode: forwards; } @keyframes fadeOut { 100% { opacity: 0; visibility: hidden; } }La forma en que funciona es que espera 10 s como debería debido a setTimeout y luego muestra el precargador durante 10 s adicionales en lugar de alinearse con el retraso.
¿Cómo puedo lograr esta funcionalidad?
animation-delay: 10s;Debo señalar que esto es bastante malo en términos de experiencia del usuario a menos que planee reducir esos temporizadores.