Cómo agregar indicadores de carga a una aplicación Vue.js

Introducción

Los indicadores de carga mejoran la experiencia de usuario (UX) en cualquier aplicación, ya sea web o móvil. Estas animaciones le indican al usuario que se está realizando una acción y que pronto recibirá un resultado.

En las aplicaciones web, hay dos eventos principales que necesitan cargadores:

• Solicitudes de red como navegar a una página diferente o una solicitud AJAX.
• Cuando se está ejecutando un cálculo pesado.

Este artículo presentará algunas formas en las que puede agregar cargadores a sus aplicaciones Vue.js.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local.

Este tutorial fue verificado con Node v14.2.0, npmv6.14.5, vuev2.6.11 y vue-routerv3.1.6.

Paso 1: Configuración del proyecto

Vamos a crear un nuevo proyecto Vue. En este tutorial, se utilizará la interfaz de línea de comandos (CLI) de Vue para crear la estructura de la aplicación:

npx @vue/cli@4.5.4 create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "vuex": true, "router": true, "routerHistoryMode": true }' vue-loading-indicators

Este comando largo es un conjunto de valores predeterminados basados ​​en valores predeterminados establecidos por @vue/cli/packages/@vue/cli/lib/options.js. Cuando se reformatea para facilitar su lectura, se ve así:

{  "useConfigFiles": false,  "plugins": {    "@vue/cli-plugin-babel": {},    "@vue/cli-plugin-eslint": {      "config": "base",      "lintOn": ["save"]    }  },  "vuex": true,  "router": true,  "routerHistoryMode": true}

Estos ajustes preestablecidos se agregan vue-routercomo complemento ( cli-plugin-router), se agregan vuexcomo complemento ( cli-plugin-vuex), habilitan el modo historial, agregan Babel y agregan ESLint.

Para las necesidades de este tutorial, no necesitará TypesScript, compatibilidad con aplicaciones web progresivas (PWA), Vuex, preprocesadores CSS, pruebas unitarias o pruebas de extremo a extremo (E2E).

A continuación, cambie al nuevo directorio del proyecto:

cd vue-loading-indicators

Puede ver su aplicación en su navegador web ejecutando el siguiente comando:

npm run serve

Cuando visites el sitio localhost:8080desde un navegador web, deberías ver un "Welcome to Your Vue.js App"mensaje. También habrá enlaces a una página de inicio y una página Acerca de , ya que incluiste Vue Router. Tu objetivo será agregar un indicador de carga al navegar entre estas dos páginas.

Si desea obtener más información sobre Vue CLI, puede consultar la documentación de Vue CLI.

Ahora ya estás listo para empezar a construir.

Paso 2 — Usonprogress

Puede utilizar cualquier indicador de carga que prefiera. En este tutorial, instalará nprogressel que utilizará como indicador de carga.

No utilizarás npmni yarnpara esto. Lo referenciarás desde una CDN (red de distribución de contenido).

En el proyecto Vue CLI creado, navegue hasta public/index.htmlel archivo:

nano public/index.html

Y agregue el fragmento a continuación antes de la /headetiqueta de cierre:

público/índice.html

head  !-- ... --  link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" /  script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"/script/head

nprogressexpone algunos métodos API, pero para este artículo, necesitará dos: starty done. Estos métodos inician y detienen la barra de progreso.

nprogressTambién se puede configurar cómo progresa el cargador. Aunque esto se puede personalizar manualmente, en este artículo se utilizará el comportamiento predeterminado.

Paso 3: Uso del enrutador

Cuando utiliza el enrutador para agregar una barra de progreso a su sitio web, la funcionalidad típica que espera sería:

“Cuando un usuario navega a una nueva página, el cargador comienza a funcionar en la parte superior de la página mostrando al usuario el progreso de descarga de la página siguiente”.

Vue Routerviene con ganchos a los que puedes conectarte y que te permiten lograr esta funcionalidad.

Abra el src/router/index.jsarchivo:

nano src/router/index.js

Y agrega el código a continuación antes del export:

fuente/enrutador/index.js

// ...router.beforeResolve((to, from, next) = {  // If this isn't an initial page load.  if (to.name) {    // Start the route progress bar.    NProgress.start()  }  next()})router.afterEach((to, from) = {  // Complete the animation of the route progress bar.  NProgress.done()})export default router

Cuando se conecta a la beforeResolveruta, se le indica al enrutador que comience nprogressuna vez que se produce una solicitud de página. El afterEachenlace le indica al enrutador que, después de que un enlace haya evaluado por completo para detener la barra de progreso, no debería importarle si la solicitud de página tiene éxito.

En este punto, puedes ejecutar tu aplicación:

npm run serve

Cuando visites localhost:8080la aplicación desde tu navegador web, podrás navegar entre la página de inicio y la página Acerca de . Al hacerlo, verás el indicador de carga que agregaste a tu aplicación.

El siguiente paso explorará más a fondo los indicadores de carga.

Paso 4: Exploración del uso avanzado

En esta sección, se le presentarán otros casos de uso para cargar indicadores en su aplicación.

Estos se presentarán con ejemplos y no los implementarás directamente en tu tutorial a menos que tengas ganas de explorar por tu cuenta.

Usando una biblioteca HTTP

Otra parte de la aplicación en la que quizás quieras agregar barras de progreso es cuando el usuario realiza una solicitud AJAX.

La mayoría de las bibliotecas HTTP actuales tienen una especie de middleware o interceptor que se activa antes de que se produzca una solicitud o respuesta. Por eso, también puedes conectarte a la biblioteca que elijas.

Para este tutorial, utilizará axios. Esta biblioteca utiliza el término interceptores.

Instalar axios:

npm install axios@0.20.0

Luego crea un HTTP.jsarchivo:

nano HTTP.js

Luego puedes configurarlo axiospara que funcione así:

HTTP.js

import axios from 'axios'// create a new axios instanceconst instance = axios.create({  baseURL: '/api'})// before a request is made start the nprogressinstance.interceptors.request.use(config = {  NProgress.start()  return config})// before a response is returned stop nprogressinstance.interceptors.response.use(response = {  NProgress.done()  return response})export default instance

Este código le permite manejar sus conexiones y obtener una barra de progreso cada vez que se realiza una solicitud.

Uso de cargadores dentro de componentes

Hay ocasiones en las que no se realiza una solicitud de página ni una solicitud AJAX. Puede que se trate simplemente de una acción dependiente del navegador que lleva tiempo.

Consideremos un DownloadButtoncomponente personalizado que puede cambiar su estado a un estado de carga debido a alguna acción externa.

El componente solo aceptará una propiedad loading:

template  DownloadButton :loading="loading"Download/DownloadButton/template

El componente de ejemplo se parecería a algo como esto:

Nota: Algunos de los detalles más finos de SVG viewBox, pathy styleno están definidos en este ejemplo.

src/componentes/DownloadButton.vue

template  button :disabled="loading"    svg v-if="loading" viewBox="..."      path d="..."/    /svg    svg v-else viewBox="0 0 20 20"      path d="..."/    /svg    span v-if="!loading"      slot/    /span  /button/templatescriptexport default {  props: {    loading: { type: Boolean }  }}/scriptstyle  /* ... *//style

A continuación se muestra una demostración de lo que produciría este código:

Uso de componentes de orden superior para cargadores reutilizables

Puede crear cargadores como envoltorios (HOC) para nuestros componentes y luego modificar su estado a través de propiedades.

Este tipo de cargadores son buenos para componentes que no afectan el estado global de su aplicación, pero aún así desea que el usuario se sienta conectado a la acción en curso.

He aquí un ejemplo:

Nota: Algunos de los detalles más finos del contenido de Statsno están definidos en este ejemplo.

// This loader will add an overlay with the text of 'Loading...'const Loader = {  template: `    div      slot/    /div  `,  props: ['loading']}const Stats = {  template: `    Loader :loading="updating"      ...    /Loader  `,  props: ['updating']}const app = new Vue({  template: `    div      Stats :updating="fetchingStats"/      Button @click="fetchingStats = true"        Latest stats      /Button    /div  `,})

A continuación se muestra una demostración de lo que produciría este código:

Uso de componentes Vue asincrónicos

Los componentes asincrónicos de Vue le permiten obtener componentes del servidor solo cuando los necesita. En lugar de ofrecerles a los usuarios finales componentes que tal vez nunca usen, solo reciben lo que necesitan.

Los componentes asíncronos también vienen con soporte nativo para estados de carga y error, por lo que no es necesaria ninguna configuración adicional aquí.

He aquí un ejemplo:

const AsyncComponent = () = ({  component: import('./MyComponent.vue'),  // show this component during load  loading: LoadingComponent,  // show this component if it fails to load  error: ErrorComponent,  // delay before showing the loading component  delay: 200,  // error if the component failed to loadin is allotted time in milliseconds default in Infinity  timeout: 3000})

Para utilizar componentes asíncronos con el método aquí, debe utilizar la carga diferida de Vue Router.

Conclusión

En este artículo, exploró algunas de las formas de agregar un indicador de carga a su aplicación Vue.js. Los indicadores de carga son una herramienta útil para brindar retroalimentación a los usuarios.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.