LoadingIndicator

Scope

A generic loading indicator that may be used by any plugin or outside procedure to indicate loading.

Configuration

loadingIndicator

| fieldName | type | description | | - | - | - | | loaderStyle | enum['CircleLoader', 'BasicLoader', 'none', 'RingLoader', 'RollerLoader', 'SpinnerLoader', 'v-progress-linear']? | Choose between different loader styles. Defaults to 'v-progress-linear' (Vuetify loader). |

For details on the displayComponent attribute, refer to the Global Plugin Parameters section of @polar/core.

Example configuration:

loadingIndicator: {
  loaderStyle: 'RollerLoader',
}

Store

Mutations

// show loading indicator
map.$store.commit('plugin/loadingIndicator/addLoadingKey', key)
// hide loading indicator
map.$store.commit('plugin/loadingIndicator/removeLoadingKey', key)

The key must be unique and is kept track of via a Set. It can't be added multiple times, and removing it once always removes it altogether. It is advised to use a key like {my-plugin-or-application-name}-{procedure-name} to avoid name conflicts. The LoadingIndicator will usually be used for asynchronous code.

As such, always call removeLoadingKey in the finally section of your code to prevent hanging loading indicators.

// change loader style at runtime
map.$store.commit('plugin/loadingIndicator/setLoaderStyle', loaderStyle)

Supported loaderStyle options

It is also possible to choose none as a loaderStyle to hide the loader.

Getters

You may desire to listen to whether the loader is currently being shown.

| fieldName | type | description | | - | - | - | | loaderStyle | string | The current loader style. | | showLoader | boolean | Whether the layer is currently shown. |

mapInstance.$store.watch(
    (_, getters) => getters['plugin/loadingIndicator/showLoader'],
    (showLoader) => {
        /* This code is called on showLoader updates. */
    }
)