The loading indicator- problem with

Hi.

There’s one big problem with method of changing the loading indicator that is described: https://vaadin.com/docs/v14/flow/advanced/tutorial-loading-indicator.html

When you:

  1. disable default theming via PageConfigurator doing conf.setApplyDefaultTheme(false)
  2. set new styles for v-loading-indicator via @JsModule or @CssImport in a view

For the first time you enter a page in a browser (after page is reloaded) and you fire an event (eg. click a button) then the default vaadin loading-indicator is shown, not this you set via css/js. When you again fire the event (click button second time) then the new loading-indicator is shown. As if the first click has just turned off the default theming. But it should be turned off when the page is loaded, after all it is set via PageConfigurator!

This behavior means that you cannot set your own funny loading indicator (eg. bouncing dot) because at first it looks awkward. For examle when you use indicator as bouncing dot at first click you have default vaadin indicator (bar on top) with bouncing dot moving on top from left to right. It really looks strange.

I was testing this using vaadin starter project. I’ve only added js/css file and import it in MainView and run it. See the attachment. Run it, browse a main page and click a button (strange indicator: mix of default and changed), and then click a button again (fine indicator: no default, only changed).

Is this a bug? Is any workaround for this?
Any help is appreciated, because I’d like to use my own loading indicator (modal curtain with some funny dot :slight_smile:
17919430.zip (25.1 KB)

Hello. If the instructions given in the documentation do not work for customizing the indicator, please open an issue to https://github.com/vaadin/flow/issues/new

Thank you. Issue: https://github.com/vaadin/flow/issues/6824