Keep page loading until map is finished-CodePudding

I have the following code, where I fetch an API and populate a container inside a function

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`
}

However, the page loads extremely fast but the results take a few seconds to show up. How can I keep the page in the loading state until the funciton is complete?

CodePudding user response：

You can use ternary operator

arrayForms ? arrayForms.map(
({ NUMERO, DESCRICAO, GRUPO, AUDIT_DATA }) => {
  container.innerHTML = `foo`
}) : "Loading data..."

CodePudding user response：

SO I simply used a ternary operator after the map like so

container.innerHTML == '' ? console.log('not yet') : console.log('now');

which reads when the map has finished. This bypasses a problem I was having where a line after map() is also be executed before map().