I'm trying to load a big image gallery, but it only appears after every single image finishes loading?

I’m making an image gallery type of app. It loads the images from Airtable and then stores the values as a list called “images”. Then, it does something like this to make the images appear on screen:
bandicam 2025-01-22 19-26-21-707
On first glance, it looks like it should work normally. But the thing is that when I test the app (in companion or after building, it doesn’t matter) it loads for like 1-5 full minutes, and then displays the images all at once. I want it to load images one by one. How do I make it so that the images appear before the “for each number” loop is finished? I can’t have my users wait 5 minutes for the entire 350+ image gallery to load!

Try using an async approach by loading images one by one inside the loop and adding a small delay or calling a procedure after each image is loaded. This way, images will show progressively instead of waiting for the entire loop to finish.

I’m not sure what you mean by that. Can you show me an example with blocks?

Try this extension

You might take a look into the below extension:

I already tried this one. It makes my app crash.
As for the one by @JEWEL, I don’t have the money to buy paid extensions right now.

I don’t think async image loading would help either way. Sure, the images would load quicker, but they’ll still have to be loaded all at once, instead of appearing one by one.

@Mikedular, I tried calling an empty procedure in the loop but it still waits for the entire loop to finish. Is that what you meant, or am I doing it wrong?

Give it a try. It is the best alternative to Glide.

I tried it too. Still waits for the loop to finish.

Please show us your relevant blocks.

It depends on the image sizes, how many images are being requested to load at a time. When you request multiple images to load they will be kept in que and loaded one by one. However if you use Async function it will load all at once but this also depends on the image sizes.

That’s the point. I want the images to load one by one. Not the entire 380 image gallery all at once. All of the images are around 2k in resolution, so you can imagine how long it would take to load 380 1440p images.

I found something like this while looking for help on the MIT AI2 forums:

The essence of App Inventor’s event model is the following five Event Rules:

  1. Only one event handler can be executing at any given time.
  2. Other events that occur while an event handler is executing are queued and handled later, in order.
  3. Any GUI changes during an event handler are not displayed until the event has completed.
  4. Certain system actions (playing a sound file, initiating a web request, etc.) are executed in a thread separate from the current event handler.
  5. Playing a sound on a Player component first terminates any sound currently playing except when the source file has not been reset, in which case the new play request is ignored if the sound is already playing.

Rule 3 is my problem. I need a way to bypass it.

Then first load few items and load remaining as user interacts with the UI like load more items as user scrolls.

There is no way to detect scrolls in ScrollArrangements.

There is!

Use Scroll handler extension.

Okay, but that would make the code messy. And I have no idea how to load only a set number of images, stop, and then pick up when a user scrolls down. Isn’t there a simpler way? Something that would let me change UI elements during an event?

See here how to load more items as user scrolls: this is with my image list view extension but you can apply to your use also.

I want to load images without any titles, captions, etc. Is it possible with this extension?