app/loading.tsx – Stări de încărcare instantanee (React Suspense) în Next.js

export default function Loading() {
  return <div className="spinner">Se încarcă...</div>;
}

Ce face app/loading.tsx - Stări de încărcare instantanee (React Suspense)

Fișierul loading.tsx creează automat o barieră `React Suspense` în jurul fișierului `page.tsx` asociat.

Când utilizatorul navighează către o rută nouă, Next.js afișează instant scheletul definit în `loading.tsx` în timp ce serverul execută apelurile de baze de date sau API-urile din pagină.

Odată ce datele sunt gata, scheletul este înlocuit lin cu conținutul real (Streaming SSR).

Exemple

Exemplul 1: Crearea unui schelet de încărcare (Skeleton loader) cu Tailwind CSS

Oferă feedback vizual modern în timp ce datele sunt citite pe server.

export default function Loading() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-8 bg-gray-200 rounded w-1/3"></div>
      <div className="h-4 bg-gray-200 rounded w-full"></div>
      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
    </div>
  );
}

Ieșire în terminal

Utilizatorul vede blocul animat până la finalizarea randării paginii.

Greșeli frecvente

• Utilizarea stărilor clasice ‘const [loading, setLoading] = useState(true)’ în Server Components; în App Router totul se gestionează declarativ prin loading.tsx.

Comenzi înrudite

• app/page.tsx - Definirea conținutului specific al unei rute: Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.
• app/error.tsx - Gestionarea erorilor neașteptate (Error Boundary): Izolează erorile din componentele copil și afișează o interfață prietenoasă de recuperare cu buton de reîncercare.
• app/layout.tsx - Șabloane de structură persistente (RootLayout și Nested Layouts): Definește structura grafică comună partajată între mai multe pagini (antet, meniu, subsol) ce își păstrează starea la navigare.