La carga de UI y elementos visuales son componentes importantes en aplicaciones web y móviles; Desempeñan un papel fundamental en la mejora de la experiencia y el compromiso del usuario. Sin tales señales, los usuarios podrían sentirse desconcertados e inseguros acerca de si la aplicación está funcionando correctamente, si desencadenaron las acciones correctas o si sus acciones se están procesando.

Al proporcionar a los usuarios varias señales visuales que indican el procesamiento en curso, puede mitigar eficazmente cualquier forma de incertidumbre y frustración, lo que en última instancia los disuade de salir prematuramente de la aplicación.

Impacto de la carga de UI en el rendimiento y la experiencia del usuario

Las diez heurísticas de Jakob Nielsen para el diseño de interfaces de usuario enfatizan la importancia de garantizar que el estado actual del sistema sea visible para los usuarios finales. Este principio resalta la necesidad de componentes de interfaz de usuario, como UI de carga y otras UI de retroalimentación. elementos para proporcionar rápidamente a los usuarios retroalimentación adecuada, sobre los procesos en curso y dentro de los plazos requeridos. periodo de tiempo.

Las interfaces de usuario de carga desempeñan un papel fundamental a la hora de dar forma al rendimiento general y la experiencia del usuario de las aplicaciones. Desde una perspectiva de rendimiento, implementar pantallas de carga efectivas puede mejorar significativamente la velocidad y la capacidad de respuesta de una aplicación web.

Idealmente, el uso eficaz de las IU de carga permite la carga de contenido asincrónica; esto evita que toda la página se congele mientras se cargan componentes específicos en segundo plano; Básicamente, crear una experiencia de navegación más fluida.

Además, al ofrecer una indicación visual clara de los procesos en curso, es más probable que los usuarios esperen pacientemente la recuperación del contenido.

Comenzando con React Suspense en Next.js 13

Suspenso es un componente de React que gestiona operaciones asincrónicas que se ejecutan en segundo plano, como la recuperación de datos. En pocas palabras, este componente le permite representar un componente alternativo hasta que el componente secundario deseado monte y cargue los datos requeridos.

A continuación se muestra un ejemplo de cómo funciona Suspense. Supongamos que tiene un componente que obtiene datos de una API.

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

El suspenso mostrará el Cargando componente hasta que el contenido del Todos El componente termina de cargarse y está listo para renderizarse. Aquí está la sintaxis de Suspense para lograr esto:

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 admite React Suspense

Next.js 13 agregó soporte para Suspense a través de su función de directorio de aplicaciones. Esencialmente, trabajando con el directorio de la aplicación le permite incluir y organizar archivos de páginas para una ruta particular dentro de una carpeta dedicada.

Dentro de este directorio de rutas, puede incluir un cargando.js archivo, que Next.js utilizará como componente alternativo para mostrar la interfaz de usuario de carga antes de representar el componente secundario con sus datos.

Ahora, integremos React Suspense en Next.js 13 creando una aplicación de demostración de tareas pendientes.

Puedes encontrar el código de este proyecto en su GitHub repositorio.

Crear un proyecto Next.js 13

Creará una aplicación sencilla que obtendrá una lista de tareas pendientes del API ficticia de JSON punto final. Para comenzar, ejecute el siguiente comando para instalar Next.js 13.

npx create-next-app@latest next-project --experimental-app

Definir una ruta para todos

Dentro de origen/aplicación directorio, cree una nueva carpeta y asígnele un nombre Todos. Dentro de esta carpeta, agregue un nuevo página.js archivo e incluya el siguiente código.

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }
const {todos} = await fetchTodos();
asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }
await wait(3000); 
return (
 <> 

"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (


"todos">

<h2>{todo.todo}h2> </li>
 </div>
 </ul>
 ))}
 </div>
 </div>
 </>
 );




}
exportdefault Todos;

La función asincrónica, Todos, recupera una lista de todos de la API DummyJSON. Luego, recorre la matriz de todos recuperados para representar una lista de todos en la página del navegador.

Además, el código incluye un asincrónico esperar función que simula un retraso, creando un escenario que permitirá a un usuario ver una interfaz de usuario de carga durante un período específico antes de mostrar los todos recuperados.

En un caso de uso más realista; en lugar de simular un retraso, situaciones como el procesamiento de actividades dentro de aplicaciones, la obtención de datos de bases de datos, consumiendo las API, o incluso, los tiempos de respuesta lentos de la API provocarían algunos retrasos breves.

Integre React Suspense en la aplicación Next.js

Abre el aplicación/diseño.js archivo y actualice el código estándar Next.js con el siguiente código.

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

El aplicación/diseño.js El archivo en Next.js 13 sirve como un componente de diseño central que define la estructura general y el comportamiento del diseño de la aplicación. En este caso, pasando el niños apoyar a la Suspenso componente, garantiza que el diseño se convierta en un contenedor para todo el contenido de la aplicación.

El Suspenso El componente mostrará el Cargando componente como respaldo mientras los componentes secundarios cargan su contenido de forma asincrónica; indicando al usuario que el contenido se está recuperando o procesando en segundo plano.

Actualizar el archivo de ruta de inicio

Abre el aplicación/página.js archivo, elimine el código repetitivo Next.js y agregue el código a continuación.

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}
exportdefault Home;

Cree el archivo loading.js

Finalmente, sigue adelante y crea una cargando.js archivo dentro del aplicación/Todos directorio. Dentro de este archivo, agregue el código a continuación.

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Agregar hilanderos modernos al componente de carga de la interfaz de usuario

El componente de carga de la interfaz de usuario que creó es muy básico; Opcionalmente, puede optar por agregar pantallas esqueléticas. Alternativamente, puede crear y diseñar componentes de carga personalizados. usando Tailwind CSS en su aplicación Next.js. Luego, agregue animaciones de carga fáciles de usar, como controles giratorios proporcionados por paquetes como Reaccionar hilanderos.

Para utilizar este paquete, continúe e instálelo en su proyecto.

npm install react-loader-spinner --save

A continuación, actualice su cargando.js archivo de la siguiente manera:

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (



Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}
exportdefault Loading;

Ahora, la interfaz de usuario de carga mostrará un mensaje de carga y mostrará una animación de líneas giratorias para indicar el procesamiento en curso mientras se obtienen los datos de Todos.

Mejore la experiencia del usuario cargando interfaces de usuario

La incorporación de interfaces de usuario de carga en sus aplicaciones web puede mejorar significativamente la experiencia del usuario. Al proporcionar a los usuarios señales visuales durante las operaciones asincrónicas, puede minimizar eficazmente sus preocupaciones e incertidumbres y, en consecuencia, maximizar su participación.