Show loading icon until all data has loaded on the page

Is there a way to show a loading spinner/icon that only goes away once all the data on a page has loaded? Something similar to the “Image with loading spinner” component in the marketplace but instead of just for images, it would be for the entire page.

Or is there a way to set a variable once all the data on a page has loaded (both images and text)?

Hi, if you take a look at a page’s default logic, you can see that the “Hide spinner” logic is already there. If you want the spinner to display for longer, you can move “Hide spinner” from here or put some additional logic before it. For example, you could have a page variable called “loading” that you change from true to false when everything is loaded, and then use the “Page variable loading changed” trigger in “Receive event” node to trigger the “Hide spinner” flow.

1 Like

Hi Mari,
thanks for your reply on the issue.

So I have seen the “Hide Spinner” logic already and I’ve tried changing its position in my logic but it’s not quite a perfect fit. Mainly because data changing seems to happen before components actually interact with said data.

For example, if I have an image component on my page that displays a picture whose URL is taken from a GET request and I wanted to hide the spinner once the image was loaded on the page, I could try to hide the spinner after the “Receive event” “Data Image Source” has changed, but what seems to happen is that the trigger is made the moment the GET request is completed, even though the image loading might happen 2-3 seconds later.

I imagine it looks something like this:

Get Request —> Recieve Trigger Fired —> Hide Spinner Triggered —> Image Actually Loads

So what I’m more looking for is a trigger that happens only when the image has actually loaded. Is there a way to check that?

As a workaround, I’ve created a custom loading animation (since the “Show Spinner” page cannot be customized" and used the logic we discussed above, but to counteract the premature hiding of the loading animation I’ve added a delay of about half a second to allow images to load on the screen.

I’d prefer being able to trigger a variable or something once the images have loaded though because with my workaround if the page loads faster than usual the waiting time for the hide spinner won’t change (because of the delay). So no matter the data speed or phone you’ll have to wait for a page to load in every instance which is unfortunate.

Hi @Mari just to confirm, spinner doesnt work in web app? thank you