Show loading circle gif on every page when page loads

Hello!

A lot of my pages in bubble load very slowly and it takes about 1-4 seconds to show the content of the next page. After a click it takes sometimes about 1 second to see an effect e.g. white page and so sometimes you don’t know if a touch on the screen was correctly recognized.

I have made a workaround that shows a loading loop gif after a click on certain buttons and this works fine.

However, I would like to have this gif animation on each page and it is very time consuming to implement it on every page.

Is there an easy workaround for realizing this?

Best regards
Eneas

Can you create a reusable element for this?

This would be a possible idea.

But it’s still a big effort when you have for example 40 pages and at least one button per page to implement this.

However, for me its very frustrating that:
a) it takes so much time when you do search for… or write to the database and
b) that buble doesn’t automatically show a loading circles on all worklows where a navigate to is on the end of the workflow.

a) This can be a result of how you have your data set up. Just like any software, an app built on Bubble can be poorly optimized. We have a product launched that does plenty of search for… logic and none of our users have complained thus far.

b) I’d be pretty upset if Bubble automatically did that, but that’s just me. I want complete control over how my app looks and feels, which is why I use Bubble in the first place. It’s purely an opinion, of course, but I’d be pretty bummed if Bubble took that out of my hands.

2 Likes

@eneas, I’ve had similar challenges even with pages that load very little data. I’ve simply added a condition to many of my buttons that changes the text to address this, which is a really simple fix. For example: if the button says “Submit” then, on-click, I’ll have it update to “Submitting…”

I believe the Bubble team has been working on a few core engineering issues, such as upgrading their database set-up, that will help improve overall site performance. I encourage them to continue doing so as snappyness is a very important component of the user experience. While adding features such as loading icons, etc. mitigates the pain, I think it’s best they work to more directly resolve this issue instead. Just my 2 cents.

4 Likes

@Eneas, can you share how you managed to show loading indicator for long loading time?
I’d like to do that for bigger images I have in my app.

In my apps I have a hidden (by default) floating group that contains an animated, looping loading GIF. This sits above all other layers. I have a conditional statement on this group that only makes itself visible when all page data has not yet finished loading. Then conversely on all the groups I want to use as UI views, they are hidden by default and are only shown when URL parameters match up and page IS finished loading (entire).

7 Likes