¿Cómo agregar la carga de esqueleto en NextJS?

En este artículo, vamos a aprender cómo podemos agregar Skeleton Loading en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: para agregar nuestra carga de esqueleto, usaremos el paquete react-loading-skeleton. El paquete react-loading-skeleton nos ayuda a agregar una carga de esqueleto en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-loading-skeleton y luego agregaremos una pantalla de carga en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-loading-skeleton usando el siguiente comando:

npm i react-loading-skeleton

Estructura del proyecto: Se verá así.

Agregar la carga del esqueleto: después de instalar el paquete, podemos agregar fácilmente la carga a nuestra aplicación. Para este ejemplo, vamos a agregar una carga de esqueleto a nuestra página de inicio.

import React, { useState } from 'react';
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
  
export default function SkeletonLoading(){
  const [checked, setChecked] = React.useState(false);
  
  const handleChange = () => {
    setChecked(!checked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
        Loading
      </label>
      <p>{checked?<Skeleton />: 
           <h2>
           NextJs Skeleton Loading - GeeksforGeeks
           </h2>}</p>
  
    </div>
  )
}

Explicación: en el ejemplo anterior primero, estamos importando nuestro componente Skeleton del paquete instalado. Después de eso, estamos usando el componente Skeleton dentro de una nueva función. También estamos usando el gancho de reacción para verificar el valor actual en la casilla de verificación. Si la casilla de verificación está marcada, estamos mostrando nuestra pantalla de carga.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: