Remove/change loading animation (blue progress indicator)

[sageworksstudio]

Is it possible to remove the default blue loading (page loading) indicator for a resource? More specifically, I want to change the indicator to something else. Is this possible?

[Paul-Bob]

Hi @sageworksstudio

You are referring to the turbo progress bar? This one?

If so, this might help you https://railsdesigner.com/turbo-progress-bar/

You can change it from the turbo-progress-bar class.

If you made the Tailwind CSS integration you can change it like this:

app/assets/stylesheets/avo/avo.tailwind.css

...

.turbo-progress-bar {
  @apply bg-red-500;
}

...

[sageworksstudio]

Awesome, and thank you for your reply! I'll have a look.

[sageworksstudio]

@Paul-Bob A quick follow-up on this. I am trying to do something truly custom to match our brand (I.e., a branded spinner icon). Will this require ejecting Avo's application.html.erb template in order to add a custom div for the loader? I followed Andy's tutorial that you linked to (custom JS controller), but it doesn't seem to work. Is there anything besides ejecting the layout template that I might be missing?

[Paul-Bob]

A quick follow-up on this. I am trying to do something truly custom to match our brand

Avo displays some branding customization https://docs.avohq.io/3.0/branding.html

Will this require ejecting Avo's application.html.erb template in order to add a custom div for the loader?

No, the turbo loading bar is independent of Avo. It is controlled by Turbo and appears on turbo requests that take longer than 500ms. In Avo, we only applied a blue color to it.

I followed Andy's tutorial that you linked to (custom JS controller), but it doesn't seem to work. Is there anything besides ejecting the layout template that I might be missing?

The tutorial I shared focuses on customizing the progress bar style. I haven't personally replaced the default progress bar with something custom before, so I don't have an example to provide.

You could try hiding the progress bar and identifying which hooks trigger its appearance. Then, you can implement your own spinner using those same hooks.

To hide the progress bar, you can adjust its visibility:

.turbo-progress-bar {
  visibility: hidden;
}