Hoy en día es común que cuando navegamos por nuestras redes sociales (Facebook, Instagram, Twitter) nos quedemos esperando a que el contenido cargue, ya sea una foto, una pila de comentarios o un post en particular. Hoy vamos a aprender como crear ese efecto de espera del contenido apoyándonos de una librería disponible para Vue.js y React.js.

Qué es Vue.js🤔

Mejor conocido como Vue, es una libreria o framework (que importa me entendieron) que nos permite crear web dinámicas con JS de última generación las cuales se conocen como SPA (Single Page Aplications). Es un framework con un muy buen manejo del DOM donde sus mejores características es su capacidad de incluir funcionalidad progresivamente y sus Single File Components.

Ahora si a lo que venimos😜

Content Loaders en Vue

Para poder realizar este efecto nos apoyaremos de algunas librerias que me han sido de mucha ayuda al momento de hacer cambio de ruta, al apretar un botón mostrar un efecto de espera al usuario de que se procese la solicitud, es muy util en un login o cuando queremos consumir una API mientras esperamos la respuesta.

vue-content-loader

Instalación

$ npm i --save vue-content-loader

ó

$ yarn add vue-content-loader

MyComponent.vue

<script>
  import { ContentLoader } from "vue-content-loader"

  export default {
    components: {
      ContentLoader
    }
  }
</script>
<template>
  <content-loader
    :height="160"
    :width="400"
    :speed="2"
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
  >
    <circle cx="10" cy="20" r="8" /> 
    <rect x="25" y="15" rx="5" ry="5" width="220" height="10" /> 
    <circle cx="10" cy="50" r="8" /> 
    <rect x="25" y="45" rx="5" ry="5" width="220" height="10" /> 
    <circle cx="10" cy="80" r="8" /> 
    <rect x="25" y="75" rx="5" ry="5" width="220" height="10" /> 
    <circle cx="10" cy="110" r="8" /> 
    <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
  </content-loader>
</template>

Como pudimos notar este pedazo de código de un componente tanto en react como en vue, aunque el js cambia un poco en estructura el HTML es el mismo donde nos interesa lo que est dentro del componente ContentLoader (NOTA: en vue podemos utilizar UpperCamelCase para nombrar el componente o Kebab) los elementos circle y rect nos proporcionan la interfaz para crear nuestros content loaaders para Posts, Comentarios, Código, Barras, etc...
Basicmanete contamos con los siguientes taributos

circle:

  • *cx: posicion en x partiendo de izquierda-derecha
  • cy: posicion en y partiendo de arriba-abajo
  • r: radio del circulo (útil para simular un avatar cargando)

rect:

  • x: posicion en x partiendo de izquierda-derecha
  • y: posicion en y partiendo de arriba-abajo
  • rx: variar este parémetro permite darle una curvatura en x
  • ry: curvatura en y
  • width: longitud del elemento
  • heigth: grosor del elemento

Vue Loading Spinner y Vue Loading Overlay

vue-loading-spinner

Esta libreria es de mis favoritas, con ella puedes insertar iconos animados con loading effects y tiene a disposición una gran cantidad de opciones para elegir la que se acomode...

Instalación

$ npm i --save vue-loading-spinner

Uso

<template>
  <div id="app">
  <!-- Llamamos al componente -->
    <cube-spin></cube-spin>
  </div>
</template>
 
<script>
  // importamos el componente una vez instalado
  import CubeSpin from 'vue-loading-spinner/components/Cube'
  
  export default {
    // lo colocamos dentro del hook de componentes
    components: {
      CubeSpin
    }
  }
</script>

Resultados

vue-loading-overlay

Si lo que estamos buscando es algo mas invasivo y restringir la pantalla por completo en una llamada asíncrona, podemos usar esta libreria que igual tiene muchas configuraciones para personalizarla a nuestras necesidades.

Instalación

# npm 
npm install vue-loading-overlay --save
 
# Yarn 
yarn add vue-loading-overlay

Uso

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading" 
        :can-cancel="true" 
        :on-cancel="onCancel"
        :is-full-page="fullPage"></loading>
        
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">fetch Data</button>
    </div>
</template>
 
<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }
</script> 

Sin duda que hay muchas opciones con esto de los content loaders, espero te haya gustado este post... pronto escribiré más recomendaciones para que sigas desarrollando Frontend.... like a pro!!!😎