Vue-Await

Easy-to-use loading indicator

Install

npm i @simpli/vue-await

Import

import Vue from 'vue'
import VueAwait from '@simpli/vue-await'

Vue.use(VueAwait)

On your Scss:

@import "~@simpli/vue-await/scss/await";

Basic Usage

<await name="myRequestName">
  To be shown after loading
</await>

On a Vue instance:

this.$await.run('myRequestName', async () => {
  // Make the request here
})

Outside a Vue instance:

import {$await} from '@simpli/vue-await'

$await.run('myRequestName', async () => {
  // Make the request here
})

Other props and slots

<await
  name="myRequestName"
  effect="vueTransitionCssClass"
  spinner="vueComponentNameToBeRenderedOnLoading"
  :spinnerColor="colorThatWillBePassedAsPropToTheComponent"
  :spinnerPadding="paddingForTheLoadingElement"
  :spinnerScale="zoomForTheLoadingElement"
  @loading="callbackWhenLoading"
  @error="callbackWhenErrorIsThrown"
>
  The content to be shown after loading
  <template slot="error">
    The content to be shown if a error is thrown
  </template>
</await>

Define the loading indicator with a slot

<await
  name="myRequestName"
>
  The content to be shown after loading
  <template slot="loading">
    The content to be shown when loading
  </template>
</await>

Configure the Default behaviour

$await.defaultTransition = 'vueTransitionCssClass'
$await.defaultSpinner = 'vueComponentNameToBeRenderedOnLoading'
$await.defaultSpinnerColor = '#42b983'
$await.defaultSpinnerPadding = '10px'
$await.defaultSpinnerScale = 1

$await Methods

// gets the component to be shown when 'myRequestName' is loading
const spinnerOfMyRequest = $await.loader['myRequestName']

// define the component to be shown when using 'MyComp' as loader
$await.addLoader('MyComp', MyComponentClass)

// returns a boolean indicating if 'myRequestName' is loading
const isLoading = $await.inAction('myRequestName')

// initialize the loading passing the request name
$await.init('myRequestName')

// ends the loading of 'myRequestName'
$await.done('myRequestName')

// indicate an error on 'myRequestName'
$await.error('myRequestName')

// initialize the loading, process the request on the callback and then ends the loading
$await.run('myRequestName', async () => {
  // your request goes here
})

Using with Serialized-Request

RequestListener.onRequestStart(reqName => $await.init(reqName))
RequestListener.onRequestEnd(reqName => $await.done(reqName))

Using with Vue-spinner

import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'

$await.addLoader('ScaleLoader', ScaleLoader)
$await.defaultSpinner = 'ScaleLoader'