Loading

El componente de Loading se encarga de mostrar la animación al usuario cuando un proceso toma un tiempo considerable. Puede ser usado de forma global (oscureciendo la pantalla completa y mostrando la animación en medio) o de forma local dentro de otro componente (oscureciendo el componente solamente).

Uso global

Este componente está importado en layout default por lo que puede ser activado desde cualquier lugar de la app. Mediante una integración con vuex, basta con las siguientes lineas para activar y desactivar la animación de carga.

this.$store.commit('global/setBusy')
// await some function
this.$store.commit('global/setFree')

Uso en componente

Para usarlo en un componente se debe importar el componente y usar de la siguiente manera

<template>
  <div>
    <loading :active="isBusy"  />
    // cuerpo del código
  </div>
</template>

<script>
import Loading from '~/components/dna/layouts/LoadingComponent'

export default {
  data: {
    return {
      isBusy: false
    }
  },
  methods: {
    someProcess() {
      this.isBusy = true
      // await some function
      this.isBusy = false
    }
  }
}
</script>