How to display loading icon while loading data?

Hi there,

It 's take time to load my data from sheet, I want to show loading icon to make good UX, can I and how?
Google researched but not helpful.
Thanks.

1 Like

I just added this to an app I’m working on! It will depend on the flow that you have and the actions users are taking.

For mine, I have a button with a custom action - the first action triggers the loading GIF and the last action clears it.

I believe whatever flow you have that will be the key - a custom action linked to a button or other component:

Action 1: set column that triggers visibility of the GIF
Action 2: [whatever function you need to perform]
Action 3: clear column that triggers visibility of the GIF

11 Likes

Nice solution. But this wont work when the app is starting and loading the data for the first time.
I have the same problem. It took ten seconds to load the data and in this time the user look at rthe “there is no data” screen.

I haven’t experienced slow load times as long as ten seconds. But you’re right, this isn’t intended to replace the Glide loading GIF for loading the app itself.

This fix is meant for custom actions, google formulas, etc. that has lag time when loading/calculating data - where there’s no native icon available.

4 Likes

Thanks for solution.
In my case, flow is:
1, User submit a form with birthday and name
2, Update submited data to sheet
3, Some app script running to analyst the birthday
4, Script done, set analysted data to sheet
5, Show analysted data to Glide

I want to display loading img while Script running, hide it after script done.
This 's my set up for on submit action
image
image
How to make a time out between two time of column set? ex: wait for 3s
And how you resize the loading gif, I ve try one but it large full to screen?
Is the gif is transparent background or not?

Here 's the screen that I want to display loading img and analysted data.


Thank a lot.

1 Like

Unfortunately I don’t believe it’s possible to set a delay between actions in a multi-step sequence (I wish it was). Furthermore, my experience with this leads me to believe that all actions will fire at the same time (not in sequence).

I have updated the questions, do you have any idea?

I guess my immediate question would be what does the script do?
And have you looked for ways to do that in Glide instead of using a script?

I use a lot of Apps Script, but increasingly as I learn more about the capabilities of Glide I try to avoid it as much as possible.

1 Like

App Script run the Numerology logic, it breaks your name, birthday to single numbers.
It does some math, check if you have or not some numbers, classify you to some types then return the comment for each type.

oh, right… you posted a question related to this recently, yes?

I can’t say immediately if this would be possible without using Apps Script, but I know there may be one or two of us here that might be up for the challenge of giving it a go (no names) :joy:

Can you describe the logic in pseudocode? (or show a copy of the Apps Script code?)

1 Like

The GIF I have is transparent. As for the delay, as @Darren_Murphy it would be difficult (if not impossible to delay actions), but you could make something show/hide based on a duration of time.

You could technically create your own timer with the following steps:

  • create a column with a TIMESTAMP to record the exact time an action is triggered
  • create a NOW math column that captures the current time in hours minutes and seconds
  • create a DURATION math column that subtracts the difference between the TIMESTAMP and NOW columns
  • create an if-then column that returns TRUE or FALSE if the DURATION column is less than or greater than 3 seconds (or its time decimal equivalent)

The issue I found with this is that seconds are hard to capture. I believe I tried this method when trying to create a countdown/timer in Glide. If you’re only using this to show a GIF then it might work - but don’t quote me. I haven’t used it for this specific use case to say if there are any issues you might run into.

3 Likes