Loading UI

loading.tsx sa automaticky zobrazí kým sa načíta stránka alebo segment. Je to Suspense boundary obaľujúca obsah routy.

💡 Obnovte stránku — uvidíte skeleton z loading.tsx počas 1.5s čakania.

✓ Obsah načítaný!

Toto sa zobrazí po 1.5s — dovtedy bol viditeľný skeleton z loading.tsx.

app/loading/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-9 w-48 bg-slate-800 rounded mb-2" />
      <div className="h-4 w-96 bg-slate-800 rounded mb-8" />
      {/* skeleton UI */}
    </div>
  );
}

Výhody oproti vlastnému loading stavu

  • ✓ Automatická Suspense boundary
  • ✓ Funguje pre celý route segment
  • ✓ Navigácia ostane interaktívna
  • ✓ Žiaden klientský kód
Obnoviť stránku (sleduj skeleton)