Next.js Loading UI — loading.tsx & Suspense

▲ Next.js 15+ (App Router) 🟢 Chapter 18 of 43 📂 Phase 8: Loading, Errors & Streaming 📅 2026 Edition

📌 Covered in this chapter: loading.tsx Basics · Route-Level Loading · Suspense Boundaries · Streaming · Skeleton UI · Avoiding Layout Shifts

Data fetch avuthunnappudu, user ki blank screen kanipinchakుండా undాలి. Ee chapter lో loading.tsx, and component-level Suspense boundaries ela వాడాలో nerchukుందాం.

1The loading.tsx Special File

loading.tsx, same folder లో unна page.tsx data fetch చేస్తున్నప్పుడు, automatic గా fallback UI గా చూపబడుతుంది — ఏ manual state management అవసరం లేదు:

💻 Example 1: A Simple Route-Level Loading State

app/courses/loading.tsx ▶ Run in Compiler

export default function Loading() {
  return <p>Loading courses...</p>;
}

Behind the scenes, Next.js ఈ file ni automatic గా <Suspense fallback={"{"}<Loading />{"}"}> లో page.tsx ని wrap చేస్తుంది.

2Skeleton UI — A Better Loading Experience

Plain "Loading..." text బదులు, actual content shape ni mimic చేసే skeleton UI vాడితే, perceived performance chాలా better గా అనిపిస్తుంది:

💻 Example 2: A Skeleton Card Loader

app/courses/loading.tsx ▶ Run in Compiler

export default function Loading() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-6 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-2/3"></div>
    </div>
  );
}

3Component-Level Loading with Suspense

Whole route కాకుండా, page లో ఒక్క specific section matrame slow గా load అయితే, దాన్ని <Suspense> తో wrap చేసి, migతా page వెంటనే కనిపించేలా చేయవచ్చు — దీన్నే streaming అంటారు:

💻 Example 3: Streaming a Slow Section

app/dashboard/page.tsx ▶ Run in Compiler

import { Suspense } from "react";
import SlowStats from "./SlowStats";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading stats...</p>}>
        <SlowStats />
      </Suspense>
    </div>
  );
}

🔍 Breakdown:

<h1>Dashboard</h1> వెంటనే కనిపిస్తుంది, SlowStats ready అయ్యేవరకు దాని fallback matrame కనిపిస్తుంది — whole page block అవ్వదు.

⚠️ Common Mistake: One Giant Loading Spinner for Everything

Page లో fast content ni కూడా slow content తో paatu block చేసి, ఒక్క big spinner చూపించడం — ఇది bad UX. Suspense boundaries ఎక్కడ అవసరమో అక్కడ matrame pెట్టి, fast content వెంటనే render అయ్యేలా చేయాలి.

💻 Hands-on Interactive Practice Challenge

Create a loading.tsx for a 'reports' route that shows a simple centered spinner message.

app/reports/loading.tsx ▶ Run in Compiler

export default function Loading() {
  return (
    <div style={{ textAlign: "center", padding: "40px" }}>
      <p>⏳ Generating your report...</p>
    </div>
  );
}

Run This Challenge in Online Node.js IDE →

❓ Frequently Asked Questions (FAQ)

Q loading.tsx compulsory ah ప్రతి route కి?

Ledు, optional. లేకపోతే, page fully ready అయ్యే వరకు browser default navigation indicator (top progress bar) matrame కనిపిస్తుంది.

Q Suspense, loading.tsx రెండూ ఒకేసారి వాడొచ్చా?

Avunు. loading.tsx మొత్తం route కి apply అవుతుంది; దాని లోపల specific slow components కి extra Suspense boundaries pెట్టి, more granular streaming చేయవచ్చు.

Q Client Component లో Suspense వాడొచ్చా?

Avunు, kani Suspense ప్రధానంగా async Server Components, and lazy-loaded client components (React.lazy) కోసం design చేయబడింది — plain useState loading కోసం కాదు.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on Next.js 15+ (App Router) · Last updated August 2026