Any way of doing a component specific, centered spinner?

Anvil Q&A
1

So, I’m creating a front page dashboard for one of my apps. I this dashboard the page will be divided in n components defined by the user from a list of options.

Some of those components will use certain server functions to update itself every n minutes. I don’t want to show the spinner for the user every time any of them refreshes itself, so I’m using with anvil.server.no_loading_indicator: and anvil.server.call_s for those functions.

However, it would be best to inform the user that THAT component is updating, using a spinner specific and centered to that component. It could do exactly what the spinner does: fogs the screen and shows the spinner, but centered only in the “form” of that component.

Is there ANY way of doing something like this?

2

Not easily. Server calls block client code entirely.

You could kick off background tasks to minimise the block and then poll it to get the result when it completes.

If you set a boolean before the call (component_x_refreshing) to True and False after fetching the results, you could bind that to the visible property of anvil components on your design.

That way, for each dashboard component, you have two possible anvil components: one for whilst it’s refreshing and one for when it’s not.

1 Like
3

Yes… That is what I was thinking, but that way I will have a static image for reloading the page, not the spinner (or any other thing).

The other thing I thought of was to use a image with an anvil_extras animation or something… But it seems too much hassle. I was hoping someone new of an easier way of doing it centered in a component.

4

The image doesn’t have to be static:

1 Like
5

Alternatively, you could create a custom html form with some css for the effect you want and use that as the refreshing component.

6

This worked perfectly to me. I’ll probably create a Custom HTML Form for re-usability too. Thanks for your sugestion @owen.campbell !

2 Likes
7

Not quite what you’re after but linking this topic which seems somewhat relevant:

1 Like
8

Thank you! This is also another thing I wanted. I’m going to track that topic. Thanks @stucork !