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?
What are you using to fetch your images Max? WebAPI or MediaDB or something else?
from ‘imagex’ set ‘URL’ nad i give it the specific URL
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.
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?
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?
2 Likes
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
1 Like
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:
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.
4 Likes
Yes, that’s what I meant here:
You helped me to see how to write it with less blocks as possible 
thanks 
2 Likes
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!
2 Likes
I do this in my app. I use the loading icon and image side by side.
When the screen opens the loading icon is visible and the image is set to not visible.
In the blocks on screen open I first load the image, then make the the loading icon invisible and make the image visible. This has worked well for me as the blocks do t move forward until the image has been fully pulled from the web into my app
hey thx for the reply, can I see your app to see how it works?
i PM’d you the app.
here is the code, i use an animation until the image is loaded. then make the animation invisible and the image visible.
the function on the left invokes the one to the right,
this function makes a call to a webpage to return a picture of a graph
while this is happening, on the screen, you see this
and then aafter the image has loaded from the website, you see this
