Lección 16. Archivo Loading.

Documentación oficial de Next.js:

https://nextjs.org/docs/app/api-reference/file-conventions/loading

Next.js permite configurar de manera sencilla un archivo de espera de carga.

Esto puede ser útil para mejorar la interfaz de usuario cuando nuestro servidor tenga problemas de respuesta o peticiones asíncronas las cuales puedes ser robustas.

Para ello, basta con la creación de un archivo llamado loading.tsx dentro del directorio, donde deseamos mostrar la interfaz de carga.

Tal como seria:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-loading.tsx
    |-(cuenta)/
      |-layout.tsx
      |-login/
        |-page.tsx
      |-register/
        |-page.tsx
      |-password/
        |-page.tsx
|- ...Otros archivos...

Donde loading.tsx:

export default function Loading () {
  return (
    <h1>Cargando...</h1>
  );
}

Se mostrará al inicio de nuestra aplicación, mientras la pagina principal se encuentre cargando.

Nota: Este tipo de funcionalidad suele verse en entornos reales, ya que debido a que nuestro proyecto es demasiado ligero, resulta casi imperceptible.

Nota: Para una mejor comprensión y personalización, puedes dirigirte a la pagina oficial de Next.js del tema.