Spinner for client side process - is it possible?

Hello – is it possible to have a spinner or loading animation for a client side operation?

Right now, I’m only aware of loading animations that work for server side. Bubble will put a spinner while a repeating group loads for example. Or you can manually set a spinner based on a “while a repeating group is loading” workflow. I think both of these are server side operations, since Bubble is organizing info and sending it to the page.

But once the data is in the page, you may want to do a client side operation like an advanced filter. That operation may take several seconds, but there’s nothing to tell the user to hold on, we’re working on it.

Thank you.

Type the following into any text element and style it:

[fa][fa-spin] fa-spinner fa-spin[/fa]

Shared with CloudApp

2 Likes

Thank you for the tip.

The challenge I’m facing is how to get a spinner to work during a client side process (like an advanced filter).

Just have the first action in the workflow be to show the spinner and the last action of the workflow be to hide it.

1 Like

This is awesome. I had no idea font awesome icons could spin like that. I’ve been playing around with CSS loaders the last couple of days; this is probably better for some of my needs.

Just found this site

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

and got this to work

[fa][fa-spin] fa-spinner fa-pulse[/fa]

5 Likes

You can actually reference any repeating group with the statement is loading ‘yes’

Thanks for taking a look.

The issue is that with a RG, it responds to the search inputs changing, so there is no workflow. You can put a spinner on the process where Bubble is organizing data and sending to the page (the while the list is loading condition). However, I’m stumped on how to put a spinner on the client side activity taking place when an advanced filter is narrowing down the list that has already been loaded.

If you set advanced filters using conditionals I cannot think of a way to do it within the normal acting of the rg responding to a change in the filter.

The next best thing is what @jdiaz suggested. In other words, trigger a spinner through a wf that shows it when an input value (the filter) is changed.

Your dB model must be intricate or the amount of content must be large for you to require the use of a spinner. Perhaps you can explore how to make the dB model more performant to reduce load times. … Easier to say … I know … but sometimes worthwhile exploring.

Not doing anything complex – just a subject tag search via an “intersect with” via an advanced filter, which is required in order to search based on multiple subject tags (searching a list based on a list). I have it running fairly fast, but sometimes there’s a delay if the user is searching on a tag or tags that aren’t common, and Bubble has to cycle through a lot of entries to find matches.

Having a spinner appear when something changes is easily doable – it’s just how to have the spinner disappear when the client side process (advanced filter) is done that’s stumping me.

This topic was automatically closed after 70 days. New replies are no longer allowed.