Possible to customize the little Anvil spinny ball?

Anvil Q&A
1

Hi - my app takes a few seconds to load, is it possible to customize this blue spinny ball that displays when my app is loading with a message that is relevant to my site, or at least a ball that is the same color as the CSS in my site?

image

2 Likes
2

Is it a server side function that is taking the time?
I ask because you can use anvil.server.call_s (instead of anvil.server.call) which will silently make the call without the spinner. What you can then do is open your own dialogue box (alert box or even a form).

Read this for info :

1 Like
3

I’m not sure what is taking so much time, do import statements take up a lot of time? I feel like might have redundancy by importing all from anvil. I’m also not using Stripe on this particular page, so maybe I don’t need to import it here?
image

I actually don’t have any anvil.server.call statements on my home page, which takes the longest time to load, although I will definitely look into this silent server call

4

I have also wanted to ask this question for a while as I would like the ability to customize the spinner (eg as Googles spinner). As @ian.monat mentioned there are design aspects to this matter - and the spinner is indeed a necessary and frequent visual component of an app.

You can off course use the silent server call or pack it inside an alert. However, what happens most often is a spinner showing for a split second. An alert would probably confuse many users, as they wont have enough time to read a message.

Just to throw in my opinion.:wink:

5

You could put a component somewhere else on the form (a little animated gif in the corner or something) and show that instead of a Notification or a spinner. Bit more subtle and shouldn’t confuse the user too much.

I used to use two flashing “leds” that alternated, a bit like old modem activity lights.

6

@david.wylie - you always pull a nice trick out of the sleeve, when I think Anvil has shown a “limitation”! :slight_smile:

Will try to see if this works for me. Thank’s for the advise.

1 Like
7

Hi folks,

Just in case anyone is still looking for a clean solution to this, try adding the following to your app CSS:

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#loadingSpinner {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
    width: 100px;
    height:100px;
    border-radius: 0;
    box-shadow: none;/*0px 0px 10px 10px #fcfcfc;*/
    background-color: transparent;
    background-image: url(https://i.imgur.com/JPttykR.gif) !important;
}

Hopefully it should be reasonably obvious how to customise!

15 Likes