Componente Loading

8/27

Lectura

Componente Loading

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 pueda usarse desde cualquier parte de nuestra app.

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.

Aportes 4

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Excelente, en lo personal yo recomendaría cambiar ese .indexOf !== -1 por la función includes() así es más legible y facil de entender:

return [
          'primary',
          'secondary',
          'danger',
          'warning',
          'success',
          'info',
          'light',
          'dark'
        ].includes(value)

Del Curso de nacho me quede con PUG me parece ideal para reducir el codigo y facilitar su lectura, ademas de las funcionalidades que de por si ya trae.Si bien en un principio confunde un poco, luego te facilita mucho codear, para instalarlo solo hace falta correr el siguiente comando:

npm install pug pug-plain-loader  --save

Y el código, por ejemplo el de este componente quedaría así:

<template lang="pug">
    .loading-wrapper.text-center.py-5
        b-spinner.spinner(label="Loading..." :type="type" :variant="variant")
    h1.my-5 Loading...
</template>

Mucho mas corto y legible.
Cuestión de gustos 😉

Para quien le este dando problemas al copiar el template del BaseLoading.vue. Aquí lo dejo.

<template>
  <div class="lading-wrapper text-center-py5">
    <div class="spinner-wrapper w-100">
      <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>
  • (puede ser ‘primray’, )