Si ha utilizado una aplicación web o móvil, probablemente haya visto una pantalla esquelética. Este dispositivo de interfaz de usuario brinda una experiencia más fluida cuando una actualización depende de la recepción de datos, lo que puede demorar un tiempo en llegar.
Descubra exactamente qué es una pantalla de esqueleto, por qué podría querer usarla en su aplicación y cómo implementarla en Next.js.
¿Qué es una pantalla de esqueleto?
Una pantalla esqueleto es un elemento de la interfaz de usuario que indica que algo se está cargando. Por lo general, es un estado en blanco o "vacío" de un componente de la interfaz de usuario, sin ningún dato. Por ejemplo, si tuviera que cargar una lista de elementos de una base de datos, la pantalla de esqueleto podría ser una lista simple sin datos, solo elementos de cuadro de marcador de posición.
Muchos sitios web y aplicaciones usan pantallas esqueléticas. Algunos los usan para un estado de carga, mientras que otros los usan como una forma de mejorar el rendimiento percibido.
¿Por qué usar una pantalla de esqueleto?
Hay algunas razones por las que podría querer usar una pantalla de esqueleto en su aplicación Next.js.
Primero, puede mejorar el rendimiento percibido de su aplicación. Si los usuarios ven una pantalla en blanco mientras se cargan los datos, pueden suponer que la aplicación es lenta o no funciona correctamente. Sin embargo, si ven una pantalla esquelética, saben que se están cargando datos y que la aplicación funciona como se esperaba.
En segundo lugar, las pantallas esqueléticas pueden ayudar a reducir el "jak" o la intermitencia en la interfaz de usuario. Si los datos se cargan de forma asincrónica, la interfaz de usuario puede actualizarse de forma incremental a medida que su aplicación recibe datos. Esto puede hacer que la experiencia del usuario sea más fluida.
En tercer lugar, las pantallas esqueléticas pueden brindar una mejor experiencia de usuario si los datos se cargan desde una conexión lenta o poco confiable. Si se obtienen datos de un servidor remoto, existe la posibilidad de que la conexión sea lenta o se interrumpa. En estos casos, puede ser útil mostrar una pantalla básica para que los usuarios sepan que se están cargando datos, incluso si lleva un tiempo.
Cómo implementar una pantalla de esqueleto en Next.js
Hay algunas formas de implementar pantallas de esqueleto en Next.js. Puede usar funciones integradas para recrear manualmente una pantalla de esqueleto simple. O puede usar una biblioteca como reaccionar-cargando-esqueleto o Material UI para hacer el trabajo por usted.
Método 1: Uso de las funciones integradas
En Next.js, puede usar diferentes ganchos de reacción y condiciones simples para mostrar pantallas de esqueleto. Puedes usar el && prop para renderizar condicionalmente pantallas de esqueleto.
importar {usarEstado, usarEfecto} de 'reaccionar';funciónmicomponente() {
constante [estáCargando, estableceEstáCargando] = useState(verdadero);usarEfecto(() => {
setTimeout(() => setIsLoading(FALSO), 1000);
}, []);devolver (
<división>
{esta cargando && (
<división>
Cargando...
</div>
)}
{!esta cargando && (
<división>
El contenido de mi componente.
</div>
)}
</div>
);
}
exportarpor defecto MiComponente;
El código anterior utiliza el useState gancho para rastrear si los datos se están cargando (esta cargando). utiliza el efecto de uso gancho para simular la carga de datos de forma asíncrona. Finalmente, utiliza el && operador para renderizar condicionalmente la pantalla esqueleto o el contenido del componente.
Este método no es ideal, porque requiere configurar manualmente el esta cargando Estado y simulación de carga de datos. Sin embargo, es una forma sencilla de implementar una pantalla de esqueleto en Next.js.
Método 2: usar una biblioteca como 'React-Loading-Skeleton'
Otra forma de implementar pantallas esqueléticas es usar una biblioteca como reaccionar-cargando-esqueleto. react-loading-skeleton es un componente de React que puede usar para crear pantallas de esqueleto. Tiene un componente que puede envolver cualquier elemento de la interfaz de usuario.
Para usar react-loading-skeleton, debe instalarlo usando npm.
npm i reaccionar-cargando-esqueletoUna vez que esté instalado, puede importarlo a su aplicación Next.js y usarlo así:
importar Reaccionar de 'reaccionar';
importar Esqueleto de 'esqueleto de carga de reacción';
importar 'reaccionar-cargando-esqueleto/dist/esqueleto.css'constante Aplicación = () => {
devolver (
<división>
<esqueleto />
<h3>Segunda pantalla</h3>
<Altura del esqueleto = {40} />
</div>
);
};
exportarpor defecto aplicación;
El código anterior importa el Esqueleto componente de la biblioteca react-loading-skeleton. Luego lo usa para crear dos pantallas esqueléticas. utiliza el altura prop para establecer la altura de la pantalla del esqueleto. Ahora usted puede usar representación condicional para renderizar el componente solo cuando los datos están presentes.
Método 3: Uso de la interfaz de usuario del material
Si está usando Material UI en su aplicación Next.js, puede usar el componente de la @mui/material biblioteca. El
Usar el
instalar npm @mui/materialUna vez que esté instalado, puede importarlo a su aplicación Next.js y usarlo así:
importar Reaccionar de 'reaccionar';
importar Esqueleto de '@mui/material/Esqueleto';constante Aplicación = () => {
devolver (
<división>
<Variante de esqueleto ="rectificar" ancho = {210} alto = {118} />
<h3>Segunda pantalla</h3>
<Variante de esqueleto ="texto" />
</div>
);
};
exportarpor defecto aplicación;
El código anterior importa el Esqueleto componente de la @material-ui/laboratorio biblioteca. Luego crea dos pantallas de esqueleto. El variante prop establece el tipo de pantalla de esqueleto. El ancho y altura accesorios definen las dimensiones de la pantalla esqueleto.
También puede agregar diferentes animaciones a sus pantallas de esqueleto. Material UI tiene algunas animaciones integradas que puede usar. Por ejemplo, puede utilizar el animar prop para agregar una animación de desvanecimiento a sus pantallas de esqueleto:
importar Reaccionar de 'reaccionar';
importar Esqueleto de '@mui/material/Esqueleto';constante Aplicación = () => {
devolver (
<división>
<Variante de esqueleto ="rectificar" ancho = {210} alto = {118} />
<h3>Segunda pantalla</h3>
<Variante de esqueleto ="texto" animar ="ola" />
</div>
);
};
exportarpor defecto aplicación;
Al agregar el animar apoyar a un componente, puede incorporar movimiento visual en su interfaz de usuario. El ola El valor agrega una animación ondulante a la pantalla del esqueleto. Ahora puede usar la representación condicional para mostrar el contenido después de la pantalla de esqueleto.
Mejore la experiencia del usuario con Skeleton Screens
Las pantallas de esqueleto pueden ser una excelente manera de mejorar la experiencia del usuario de su aplicación Next.js. Pueden aumentar la velocidad percibida, reducir los bloqueos y ofrecer una mejor experiencia cuando los datos viajan a través de una conexión lenta o inestable.
Independientemente del método que elija para agregar pantallas de esqueleto, son una excelente manera de mejorar la experiencia del usuario de su aplicación Next.js.