Componente loading.js en Next.js 14 - UI de Carga Instantánea con App Router

---

El archivo loading.js (o loading.tsx) en Next.js 13+ con App Router te permite mostrar una interfaz de carga inmediata mientras la página o parte de ella se está resolviendo en el servidor. Es una pieza clave del Streaming y React Suspense integrados en Next.js.

1Loading Global

El archivo loading.js en la raíz de app/ define el fallback global para toda la aplicación. Solo debes crear el archivo loading.js en la raíz de app/ para que toda la app tenga un fallback mientras se resuelve.

// app/loading.js
export default function Loading() {
return (
    <div style={{ display: 'grid', placeItems: 'center', minHeight: '60vh' }}>
      <p>Cargando contenido...</p>
    </div>
  )
}

2Loading por Ruta

Puedes crear un loading.js dentro de una carpeta de ruta para definir un fallback específico para esa sección. Al crear un loading.js en una carpeta de ruta, Next.js renderizará automáticamente este componente como fallback cuando se resuelva la ruta correspondiente.

// app/posts/loading.js
export default function Loading() {
  return <p>Cargando posts...</p>
}

// app/posts/page.js
export default async function PostsPage() {
  // Simula una carga lenta (1.5s)
  await new Promise(resolve => setTimeout(resolve, 1500));
  return (
      <section>
        <h1>Posts</h1>
        <ul>
          <li>Post 1</li>
          <li>Post 2</li>
        </ul>
      </section>
  )
}

3Loading Anidado

El loading.js anidado se activa cuando se resuelve una ruta que tiene un loading.js en su carpeta, es decir, cuando se accede a una ruta hija.

// app/dashboard/loading.js
export default function LoadingDashboard() {
  return <p>Cargando dashboard...</p>
}

// app/dashboard/users/loading.js
export default function LoadingUsers() {
  return <p>Cargando usuarios...</p>
}

En el ejemplo anterior, cuando se accede a /dashboard/users, Next.js renderizará automáticamente LoadingUsers como fallback.