Crear un loading o página de carga en Vue 2 y 3

En esta entrada te voy a enseñar a configurar un sencillo loading para tu aplicación como el que puedes ver en el siguiente vídeo:

Crear un loading para nuestra pagina es básico en cualquier aplicación que NO tenga contenido estático y necesitamos mostrarlo cuando lanzamos un proceso que va a demorar algo de tiempo.

Para ello vamos a hacer uso de un paquete que podemos instalar mediante Node:

https://www.npmjs.com/package/vue-loading-overlay

Pudiéramos emplear un SVG, Gif o un vídeo como recurso, adecuarla con CSS y mostrarlo/ocultarlo según alguna necesidad mediante alguna propiedad booleana, pero para hacerlo más interesante vamos a emplear el paquete anterior que una vez instalado, podemos hacer uso del componente de:

       <loading
           v-model:active="isLoading"
           :can-cancel="false"
           :is-full-page=true
       />

Trabajando con el loading

El cual define los siguientes componentes:

1. v-model:active El cual recibe un booleano que indica si está o no visible.
2. :can-cancel que indica si el usuario podrá cancelar o no el loading.
3. :is-full-page Que indica si la mostramos en modo full screen o no.

Así que, con esto, adaptamos el siguiente script que forma parte de mi curso de Electron, en el cual mediante el model isLoading mostramos el Loading apenas cargue la página, ya que la carga que hacemos desde Firebase (Internet) lo hacemos de manera inicial apenas cargue el componente; luego, una vez cargado la data lo ocultamos:

this.groups = await getGroups()
this.isLoading=false

Por lo demás, cargamos el componente antes de usar y ya estamos:

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Codigo completo
<template>
   <div>
       <loading
           v-model:active="isLoading"
           :can-cancel="false"
           :is-full-page=true
       />
       <h1>Grupos</h1>
       <div class="list-group list-group-flush">
           <router-link class="list-group-item list-group-item-action" v-for="g in groups" v-bind:key="g" :to="{ name:'Chat', params:{ room: g.id } }">
               {{ g.description }}
           </router-link>
       </div>
   </div>
</template>
<script>
import { getGroups } from "../helpers/fchat"
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
   components:{
       Loading
   },
   mounted: async function(){
       this.groups = await getGroups()
       this.isLoading=false
       /*this.groups.then((res)=> {
           console.log(res)
       })*/
   },
   data() {
       return {
           groups:[],
           isLoading:true
       }
   },
}
</script>

En el código anterior, puedes ver que realizamos una petición justamente cuando montamos la aplicación de tipo síncrona, el loading se muestra por defecto según la inicialización que hicimos, una vez cargada la data, quitamos el loading.