Loading icon while fetching online pictures in image component possible? how?

loading
image

#1

Hello everyone, I’d like to show theloading animated icon while an image taken from a URL is being loaded and should disappear when loading is complete.

Any suggestions?


#2

What are you using to fetch your images Max? WebAPI or MediaDB or something else?


#3

from ‘imagex’ set ‘URL’ nad i give it the specific URL


#4

This isn’t an asynchronous event I’m afraid, so you don’t have any callback to stop the loading icon from showing.

Just out of curiosity, how big is this image you’re trying to load, and is there any reason why it’s not part of the app assets?

You could use something like the splash screen pattern to arbitrarily show/hide the icon, that would give you the desired effect.


#5

About 200 kb,
I don’t want to make the app too heavy since ppl already don’t feel like downloading too many apps, but in total it could be 2 or 3 mbs, I’ll think about making them assets.

What do you mean with

[quote=“Domhnall, post:4, topic:76365”]
the splash screen pattern
[/quote]?

I tried while ‘imagex’ get ‘image’ = null then do

but doesn’t work,
I don’t really know how media db works I need an external server that I can access to?


#6

Hi MaxB,

Unfortunately, the Image component doesn’t have an ‘on source loaded’ block in the way that the Sound component does.
When an Image component has no source picture set, the block ‘from Image get Picture’ is equal to the empty text block.
As you might imagine, once that Picture has been set to a URL, there’s no way to use the ‘from Image get Picture’ property to distinguish between whether the image itself has loaded or not.

What Domhnall is suggesting is to display the loading icon for a set number of time (2 seconds, 3 seconds, whatever suits you), then display the image.

You could also try having the Image component be invisible when the app starts, loading its image source when the app starts, and then toggling its visibility when you need to display the image. That should eliminate the need for a loading icon.

200KB is not a very large image - how long does this image take to load in your app? What site are you using to host your image?


#7

Thank you,
this was a deep explanation, the picture comes from facebook, but I’ve noticed that some of them are even less than 100kb so I might include them in the assets,
it’s not a big loading time but on slower or unstable connections it might take a while so I would have liked to use the loading icon…

I just tought that I might use a default image with a “loading image” text that would get replaced by the actual image when it’s ready.

What you say to keep the component invisible is not possible cause the image URL is set when the page is opened and changes depending on the button pressed, but thank you, much appreciated


#8

Hi MaxB,

I’ve been thinking about this and you could also have your own loading image in the app!
If you had an image of an egg timer or something to indicate that an image is loading as a file in your app, you could use blocks like this, where ‘loading_image.png’ is your loading image and “URL” is the URL of your desired image:
loading

This would be easier than using Thunkable’s loading icon in this context, but would use less space than uploading all of your images as files in your app.


#9

Yes, that’s what I meant here:

You helped me to see how to write it with less blocks as possible :slight_smile: thanks :wink:


#10

So it is! I thought you meant that you wanted to have text, like a Label, in place. I’m glad you find the blocks helpful!