Tengo el siguiente código, donde busco una API y relleno un contenedor dentro de una función
let forms = []; fetch('http://localhost:3000/getmenu') .then((res) => res.json()) .then((data) => { forms = favorites = data; showForms(forms); }) .catch(console.log('catch')); function showForms(arrayForms) { container.innerHTML = ''; arrayForms.map( ({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) => { container.innerHTML = `foo` }Sin embargo, la página se carga extremadamente rápido pero los resultados tardan unos segundos en aparecer. ¿Cómo puedo mantener la página en estado de carga hasta que se complete la función?
Puedes usar el operador ternario
arrayForms ? arrayForms.map( ({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) => { container.innerHTML = `foo` }) : "Loading data..."Entonces simplemente usé un operador ternario después del mapa así
container.innerHTML == '' ? console.log('not yet') : console.log('now');que lee cuando el mapa ha terminado. Esto evita un problema que estaba teniendo donde una línea después de map() también se ejecuta antes de map().