Loading animations / progress bars

ed727 · 2020-09-10T14:37:31.250Z

Hi, I am looking for some good resources for best practices / processes for loading animations (spinners, progress bars, etc.) to let the user know to be patient, something is loading.

I’m stumped on these:

Popup: if a popup is slow to load because it’s complex.

What Bubble does: the page darkens while the popup is building itself. Then the popup appears fully formed (note this differs from a regular group, which will appear partially built and finish building in front of you).
Loading animation: can’t figure it out. Tried to have the workflow that shows the popup also show a loading animation, but the greying out from the popup covers the loading animation. Also tried to have the loading animation in another popup, but the main popup covers it.

Page: if a page is slow to low because it’s complex.

What Bubble does: page is blank and the browser tab has a spinner going. Then page appears pretty much fully formed.
Loading animation: can’t figure it out. If you have an animation appear as part of a when page is loaded workflow, it appears with the rest of the page (not before it), defeating the purpose.

These I think I’ve figured out:

Workflow run: just have the loading animation appear at the beginning of the run and vanish when it’s complete. Bubble already runs a progress bar up top, so it’s cosmetic if you want to replace this with something else.
RG is loading: there’s a conditional option to have something appear while a RG is loading. Bubble already runs a spinner, so it’s mainly cosmetic if you want to replace it with something else.

Thank you in advance.

mazorshimon · 2021-03-18T19:36:25.110Z

hey @ed727 I wonder if you figured this part out, please let me know

ed727 · 2021-03-18T20:05:00.132Z

I figured out a workaround to #1 (popup) which you can see at this link: Is pre-loading hidden elements possible? - #4 by ed727

On #2 (page loading time), things are better since I went through some steps to lighten up pages. In general that’s really important – do everything you can to streamline the page.

Unfortunately I didn’t figure anything out beyond that. Spinners on workflows especially can be frustrating because even if you start a spinner at the beginning of a worfklow and close it at the end of a series of steps, it doesn’t necessarily work that way since Bubble seems to fire off a bunch of steps all at once.

I do have a “fake” spinner that’s set to show for a few seconds, to let a user know a workflow is executing, and to chill out. But it’s not “real” in that it’s not actually set based on the beginning and end point of the process.

On workflows, I’m also getting more comfortable with backend worfklows and moving them to the backend where relevant. That makes things quicker since it takes the processing off the page and sends it over to Bubble to do.

Generally I ran across a lot of information on various options to make a spinner or progress bar – but that’s the easy part – the hard part is getting them to work.