Componente Reutilizable de Carga con Vue.js

Curso Avanzado de Vue.js 2

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Tomar examen

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.

Componente Reutilizable de Carga con Vue.js

Componente Reutilizable de Carga con Vue.js

Bienvenida al curso

Vue consumiendo APIs oficiales de Blizzard

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de Aplicaciones Vue.js con API de Diablo III

Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa

Estructura y gestión de carpetas en proyectos Vue.js

Instalación y configuración de librerías en Vue con Bootstrap

Configuración de Axios para llamadas a APIs de Diablo III

Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js

Creación de los componentes y layouts de nuestro proyecto

Componente Reutilizable de Carga con Vue.js

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Creación de Layouts con Vue y Bootstrap para Mejorar la UI

Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

Creación de NavBar y Footer con BootstrapVue y FontAwesome

Refactorización de Importaciones en Vue.js con Plugins

Buscador de Perfiles en Diablo III: Creación de Formulario y Título

Rutas Dinámicas y Lazy Loading en Vue.js

Construcción y Consumo de APIs con Vue.js y Vuex

Creación y Uso de Componentes en Vue.js: MainBlock y TopHeroes

Visualización de Héroes con Bootstrap-Vue en Diablo III

Componente de Progreso de Actos en Vue.js

Implementación de Componentes Vue: MainBlock y PlayerStats

Navegación y Visualización de Artesanos en Vue.js

Funciones y Componentes para la Vista de Héroe en Vue.js

Agregando funcionalidades avanzadas a nuestro proyecto

Carga Diferida de Componentes en Vue.js: Mejora de Rendimiento

Implementación de Inventario de Objetos de Personaje en Vue.js

Directivas Personalizadas en Vue: Creación y Uso Básico

Configuración y despliegue de aplicaciones en Netlify con Vue.js

Creación y Personalización de Páginas en Vue.js