Loading UI

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Loading UI: the concepts, APIs, and habits you need before advancing in Next.js.

Data fetching patterns appear in every dashboard; loading and error states are not optional polish.

You will apply Loading UI in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

loading.tsx provides instant fallback UI while a route segment’s async Server Component work completes. Next.js wraps the segment in a Suspense boundary automatically.

File placement

app/dashboard/
  loading.tsx    # skeleton for dashboard segment
  page.tsx       # async data fetch

export default function Loading() {
  return <p>Loading dashboard…</p>;
}

Streaming benefit

Slow data no longer blocks the entire page shell—layouts and fast sections stream first; heavy segments resolve later.

Client-side loading states

Inside Client Components, use local useState for button spinners or SWR loading flags—loading.tsx covers the server segment boundary.

Self-check

What React primitive does loading.tsx map to?
Why place loading UI in the same folder as the slow page?

Challenge

Loading simulation

Click Load data and watch the loading flag.
Adjust the delay constant and re-run.

Done when: UI shows loading then content after the simulated fetch.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

loading.tsx scope?
Suspense vs loading file?

No discussion yet. Be the first to ask a question.