Configurable Default Loading Indicator

[jensgerntholtz]

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 perference 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.

[yusufkandemir]

Hi there 👋 Thanks for this great in-depth analysis of the possible areas that are not configurable but can be made configurable, that are configurable but can be improved, and that are configurable but not globally. We discussed this within the team/insiders, and agree that this could be a good improvement. You have stated you are willing to get your hands dirty with this in a Discord message, if you are still willing to do it, you can start working on it 👍 Let's see how it goes. We will have to review the final implementation to see if it's ready to be merged, if it has any issues, etc. We can also collectively make it better.

About the global configuration, it looks like we can add a single global property(maybe framework.config.global.spinner?) to be used in all cases, which can be overridden by component/dialog specific global configuration(e.g. framework.config.notify.spinner), then can be overridden per instance.

I've converted this discussion to an issue, see #13533.

[jensgerntholtz]

Hi, thank you for the reply. This is great news!

I am keen to start working on it, and am looking forward to your feedback once it's ready for review.

Something along the lines of framework.config.notify.spinner sounds like a good starting point.
I had the same pre-requisites in mind regarding the overriding on per-instance and plugin config.
I'll be sure to keep those in mind. 👍