Configurable Default Loading Indicator

[yusufkandemir]

Discussed in #13471

^{Originally posted by @jensgerntholtz May 19, 2022}

The Problem

The Component Library provided by Quasar has a pattern of including a Loading Indicator within numerous components. The Loading Indicator is displayed when the component is in a loading state. This state is set via a boolean provided by the loading prop whenever the component is used.

The Loading Indicator / Spinner component that is used throughout is QSpinner. The only manner in which to set a derivative Spinner component or Custom spinner component is to do this via the template.
eg.

• QInnerLoading uses the default slot
• QBtn, QImg use a named slot called 'loading'
• QPullToRefresh QTree have no configurable option?

non-components also utilize QSpinner and have no options to configure the Loading Indicator

• use-field.js, uploader-core.js

However, plugins such as

• Notify, Loading have a configurable default option (and options on per-occurrence basis) settable within "QuasarConfOptions" quasar.conf.js > framework > config

{
  framework: {
    config: {
      notify: {
        spinner: 'QSpinnerFacebook';
      }
      loading: {
        spinner: 'QSpinnerFacebook';
      }
    }
  }
}

Yet

• Dialog.js aka DialogPlugin.js has no configurable default Loading Indicator via the quasar.conf.js it only lets you set the spinner on a per-occurrence basis?

$q.dialog({
   progress: {
     spinner: QSpinnerGears
   }
})

Proposal:

To have a configurable default Loading Indicator / Spinner component in quasar.conf.js so that if you have a derivative Spinner preference or a custom Spinner you do not have to extend the js or are forced to use the Vue template (where applicable) for each of the mentioned components, plugins, and functions in order to replace QSpinnner.

[jagoncalves14]

I second this.

I'm working on a project where the designed loading spinner is always QSpinnerOval instead of the default one.
It would be great if there was a way to replace that Spinner across all components (e.g. QInput, QSelect, QButton, etc.).