How to show loading states in Next.js? | Next.js Interview Questions

What You'll Learn

loading.tsx file
Suspense boundaries
Streaming patterns

loading.tsx

code.txtTSX

// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="loading">
      <div className="spinner" />
      <p>Loading dashboard...</p>
    </div>
  );
}

Automatically wraps page in Suspense.

Suspense Boundaries

code.txtTSX

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      <Suspense fallback={<p>Loading stats...</p>}>
        <Stats />
      </Suspense>

      <Suspense fallback={<p>Loading chart...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

async function Stats() {
  const data = await fetchStats(); // Async component
  return <div>{data}</div>;
}

Skeleton Loading

code.txtTSX

// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="dashboard-skeleton">
      <div className="skeleton-header" />
      <div className="skeleton-card" />
      <div className="skeleton-card" />
    </div>
  );
}

Per-Component Loading

code.txtTSX

<Suspense fallback={<CardSkeleton />}>
  <Card />
</Suspense>