Creating a Page Loading/Page In progress Indicator

Need help Responsiveness
1

Hello,

I’ve ben going through the forum but wasn’t quite clear if this is either difficult or impossible to do on the Bubble platform.

Basically I’m going through beta testing on my app and one of the biggest complaints I get is that the app may be slow but more importantly, the user is not sure if the app is loading so they perform other acts like re-clicking on buttons.

I was advised to include an icon with each page change to show that the loading is in progress on my pages. I would imagine most developers experience this, and would appreciate some help on this.

Thanks

2

I handle this in three different stages:

  • Find out why my action is slow, and try to fix it
  • Offload pieces to an API workflow where it makes sense
  • Use the loading spinner

To use the loading spinner, I usually have showing it as the first step in the workflow. Then, the last step of the workflow is to hide it. I do this as a popup that can’t be closed by pressing escape.

5 Likes
3

Thanks @andrewgassen. I’ll give this a try.

Now the loading spinner you are talking about is the commercial plugin by Zeroqode correct?

4

Actually, I just use my own icon and animate it myself. I haven’t checked out their plugin, but might be worth a shot!

5

It seems pretty pricey $5/month

I’ll see if I can create my own icon. Did you animate using an app like Adobe PS?

6

I just use the built in bubble animation features

7

MoveIt will let you move anything around the page and rotate either to a deg or non stop rotation. Among the countless uses for it one thing it defiantly does do is give you a massive upperhand as a visual and UX tool.

1 Like
8

Thanks Andrew, I’m able to get this working, however for my app, most of the workflow actions tend to move to a separate page so I’m not permitted further action after a navigating action. It still works though

1 Like
9

Me I just used html and made my own its easy and free lookup if you want free website loading icon html and you copy the code and get the html bubble element and paste the command in there then you can show and hide it in work flow

10

hey how did you do that?

11

I just search loading icon and you can go here: https://www.w3schools.com/howto/howto_css_loader.asp

12

Curious if anyone has a way of showing the loading animation the exact time the page loads rather than waiting for the 5-10 second white screen.

@andrewgassen - tagged you since you’re an admin and use loading animations. Hopefully you’d have an answer lol. Thanks

4 Likes
13

Hey @chris.williamson1996 were you able to do that? The loading spinner doesn’t make much sense if it doesn’t shows right when the page starts loading

14

also looking for a solution to this

15

Which conditions show that full page loading is finished?