LoadingIndicator

Scope

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

Configuration

loadingIndicator

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

v-progress-linear	BasicLoader	RingLoader
RollerLoader	CircleLoader	SpinnerLoader

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.

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