Display a loading spinner while waiting for fetched content

The Fetch Column is revolutionary—so many use cases. However, there can be a delay before the fetch content appears in the app. Here’s how you can display an animated spinner while you wait for the fetch!

14 Likes

Ha! That’s smart! Thanks for the tip, love it.

In the location search app I made, I conditioned the visibility of the fetched content to the click of a button with “Search” as text in order to simulate a user-triggered search.

I find your solution more elegant and more reliable.

1 Like

Thanks for the tutorial Robert :star_struck:

It was helpful for me :+1:

1 Like

This is awesome! Thanks so much!

Any ideas for how to do something similar while awaiting a URL construction? I’m using quickchart to generate a word cloud from user submitted words. I’d love for there to be a “loading” gif while the url is constructed and the image is generated.

My question isn’t how to create the “spinner” gif, but rather what value to use as the “if empty” visibility toggle.

@Robert_Petitto - that’s so cool, thank you for sharing Robert!

By way of thank you I will send you some stylish animated gifs in that nice purple!

1 Like

Good question. If you were to visit the URL directly in a browser as QuickChart is generating the image, what would you see? An error page? If so, you might be able to use a experimental code column to return a value of true/false as to whether the URL is valid or not and if False, then display the spinner.

No, it loads, just takes a second. I went back through some of these boards and saw a thread you started on quickchart, and saw the same thing happen for you. The image appears greyed out while it’s loading. I’d like it to look cleaner, even though it doesn’t take long. Have you solved the problem for yourself?

Do we have a code in place to read the content of a URL and return something like a status code?

I asked for that from David in his latest post.

1 Like

What about loading a GIF while waiting for Airtable data to populate? I built a system that would show the loading state if the data is empty but it looks like what’s happening is actually that the system knows there’s data from Airtable it’s just not receiving it fast enough so technically speaking it’s loading all of the forms and collections as if that data will be there even though visually it’s not actually present at the moment

Here’s a Loom overview to make it easy: Loom | Free Screen & Video Recording Software | Loom

Does your collection have any filters that rely on computed columns?

In Airtable, yes but in Glide, no. Some relations but not computed

1 Like

Ok. I was just thinking that if a computed column was involved somewhere, maybe it was still computing before displaying on the screen. Not sure what the issue could be.

Just lag time with data getting pulled from Airtable bc I have so much data getting pulled in

1 Like

I’m having the same issue when calling an image url from fetched JSON. I have the preloader gif set in a IFTTE column to conditionally show the fetched URL or the GIF URL based on the is not empty condition. But it doesn’t show. It instead just waits for the image URL to appear. Has anyone found a workaround?

What column are you using to fetch the JSON? Probably the content of that column isn’t truly empty?