Componente Reutilizable de Carga con Vue.js

Actualmente, cuando la app carga por primera vez, estamos haciendo una llamada http de tipo POST a una API de Blizzard, cuya respuesta es el token de acceso.
Estaría bien si pudiéramos mostrar un componente de "cargando" (o loading) mientras se está haciendo la llamada a la API y una vez haya terminado la petición, mostrar el contenido de nuestra app.

Lo más probable es que a dicho componente Loading tengamos que usarlo en más zonas del proyecto, no solo desde el main.js. Por lo tanto, puede ser una buena idea crear el componente Loading en /components y dejarlo preparado para que pueda utilizarse desde cualquier parte de nuestra app.

Paso a paso

Vamos a nuestra carpeta /components y creamos un archivo con el nombre BaseLoading.vue. Dentro escribimos lo siguiente:

<template>
  <!--Clases CSS de Bootstrap-->
  <div class="loading-wrapper text-center py-5">
    <div class="spinner-wrapper w-100">
      <!--Componente Spinner de Bootstrap 🔄-->
      <b-spinner class="spinner" label="Loading..." :type="type" :variant="variant"/>
    </div>
    <h1 class="my-5">Loading...</h1>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  // Propiedades que soporta nuestro componente
  props: {
    variant: {
      required: false,
      type: String,
      // Valor por defecto, en caso de que no le pasemos esta prop
      default: 'info',
      validator: (value) => {
        // Función validadora:
        // El valor de la prop debe coincidir con una de estas palabras
        return [
          'primary',
          'secondary',
          'danger',
          'warning',
          'success',
          'info',
          'light',
          'dark'
        ].indexOf(value) !== -1
      }
    },
    type: {
      required: false,
      type: String,
      default: 'border',
      validator: (value) => {
        return ['border', 'grow'].indexOf(value) !== -1
      }
    }
  }
}
</script>

<style lang="stylus">
  .spinner-wrapper
    .spinner
      width 4rem
      height 4rem
</style>

Copiamos el siguiente código en nuestro archivo, que lo único que va a hacer es poner un componente de Spinner de Bootstrap en nuestra página, de forma centrada y con un margen y un padding específico. Además, a través de las props le hemos dicho a nuestro componente que puede soportar 2 atributos (o propiedades):

• variant: que es el color del spinner (puede ser 'primray', 'secondary', etc). No es obligatorio pasarle esa propiedad, y en caso de que no se le pase ningún valor, por defecto el variant será info.
• type: puede ser de dos tipos: un círculo que crece (grow) o un spinner que gira sobre si mismo (border), por defecto, si no le pasamos ningún valor, será border.

Ambas propiedades tienen una función que valida el valor de nuestra prop:

• Tiene que ser de tipo String
• No es obligatorio pasarle un valor
• Definimos un valor por defecto
• Validamos, a través de una función, que el valor de la cadena de texto que le pasemos sea una de las que hemos definido en nuestra función validadora

Ahora que tenemos el componente Loading creado, vamos a usarlo de modo que, cuando se esté haciendo la petición HTTP para obtener el token, mostremos este componente. Lo ocultaremos cuando se haya obtenido el token (o en caso de error).

Esto es lo que haremos en la siguiente lectura.