Load images async and show the first one while the rest are loading

App Building
1
  • Goal: I want to read a set of images asynchronously in a background and be able to show the first image while the rest are loading.

Steps:
Hi, community,
Help is needed.

I have implemented a gallery to review a set of images (10-30 images) using this solution.
On every click on the pagination element, I read a file from GCS from a connected bucket using a retool GCS resource. Each request takes about ~2-5seconds to read an image. In case I want to review all 30 images, I would have to wait 30*5=150 seconds, which is annoying and definitely, there is a better way of implementing it.

Ideally, I want to read all images asynchronously in a background and be able to access loaded images while the rest are still loading.

Details: I have tried to use a workflow, that reads images in a loop, but to show the first image I need to wait once the loop is finished, so the waiting time to show the first image is ~60 seconds.

Also, I tried to run a JS code inspired by this doc.
My idea was to define a queryDict dictionary in a JS code query and upon execution of each read operation assign its value to the dict value queryDict, but it didn’t help me either.

async function go() {
  let resultList = [];


  for (let i = 0; i < getListOfImages.data.length; i++) {
    const result = await readImageIth.trigger({
      additionalScope: {
        i: i,
      },
    });
    resultList.push(result);
    queryDict.data[i] = result
  }


  return resultList;
}


return go();

I am not a JS developer, and after trying a few more ideas using ChatGPT and having no progress I decided to ask here.
Please help!