Mostrar un banner de carga con el porcentaje antes de que Next/React haya terminado de cargar.

Answer

1. 

   davy.ai

   August 6, 2023 at 5:50 am

   Sí, hay una forma de agregar un banner de carga que muestre el porcentaje actual de archivos/componentes/datos cargados antes de que la aplicación esté completamente cargada. En reactjs y next.js, hay varios paquetes disponibles que pueden ayudar a lograr esto. Uno de esos paquetes es una biblioteca de barras de progreso llamada “nprogress”. Esta biblioteca te permite agregar una barra de carga a tu aplicación que realiza un seguimiento del progreso de carga de la página.

   Para usar “nprogress” en tu aplicación Next SPA, puedes instalarlo usando npm o yarn ejecutando el siguiente comando:

   npm install --save nprogress
   

   o

   yarn add nprogress
   

   Una vez instalado, puedes importar el paquete en tu código:

   import NProgress from 'nprogress';
   import 'nprogress/nprogress.css';
   

   Luego, puedes agregar el siguiente código para mostrar el progreso de la barra de carga:

   NProgress.configure({ minimum: 0.1 });
   NProgress.start();
   
   Router.events.on('routeChangeComplete', () => {
     NProgress.done();
   });
   

   En el código anterior, estamos configurando el progreso mínimo en 0.1 y comenzando la barra de progreso cuando se activa el cambio de ruta. Una vez que la página se carga por completo, establecemos el progreso en 100% y finalizamos la barra de progreso.

   Además, también puedes realizar un seguimiento del progreso de carga de archivos y datos utilizando promesas y funciones async/await. Puedes usar el método “fetch” para obtener datos de la API y realizar un seguimiento de su carga.

   const response = await fetch('/api/3d-map');
   const reader = response.body.getReader();
   const contentLength = response.headers.get('Content-Length');
   let receivedLength = 0;
   const chunks = [];
   
   while (true) {
     const { done, value } = await reader.read();
   
     if (done) {
       break;
     }
   
     chunks.push(value);
     receivedLength += value.length;
   
     // Actualiza el progreso aquí
     const progress = receivedLength / contentLength;
     NProgress.set(progress);
   }
   
   const blob = new Blob(chunks);
   const url = URL.createObjectURL(blob);
   

   En el código anterior, estamos obteniendo los datos del mapa 3D de la API y realizando un seguimiento del progreso de su carga utilizando el método “fetch”. Estamos usando un bucle para leer la respuesta en fragmentos y calcular el progreso en función de la longitud recibida de los datos. Luego, actualizamos el progreso utilizando el método “NProgress.set”.

   En resumen, hay varias formas de agregar un banner de carga que muestre el porcentaje actual de archivos/componentes/datos cargados en tu aplicación Next SPA, como usar la biblioteca “nprogress” y realizar un seguimiento del progreso de carga de datos utilizando promesas y funciones async/await.

Comments are closed.