User input is blocked

[Sundin]

Hi! Thanks for this library and the wonderful blog post.

I have wrapped my data loading using next-frame, something like this:

async loadData() { 
    ...get contentArray from database...

    await Promise.all(contentArray.map(async (item) => { 
            await nextFrame(); 
            ...do some stuff with item...
    }));

    ...do some more stuff...
}

It sure prevented the GUI rendering from being blocked while the data loads, but for some reason the GUI doesn't respond to any input (pressing buttons etc) until the loadData method has finished. Do I do something wrong or is this just the way it is?

Update: Just out of curiosity, I put like ten await nextFrame(); in there, and then the GUI got more responsive, even if the data loading obviously took a lot longer to finish.

[rcorrie]

I know this is close to a year late, but hopefully it helps someone else.

Try using basic for loops instead of the map method, to map your data.

async loadData() { 
    ...get contentArray from database...

    let promises = [];

    for(let i = 0; i < contentArray.length; i++) {
        await nextFrame();
        let item = contentArray[i];
        let newItem = ...do some stuff with item...
        promises.push(newItem);
    }

    await Promise.all(promises);

    ...do some more stuff...
}

The map method incurs some unneeded overhead.