Loading

1
export default function Loading() {
2
  return (
3
    <div className="animate-pulse">
4
      {/* Skeleton matches final content shape */}
5
      // !mark
6
      <div className="h-8 w-48 rounded bg-gray-200" />
7
      <div className="mt-4 space-y-3">
8
        <div className="h-4 rounded bg-gray-200" />
9
        <div className="h-4 w-5/6 rounded bg-gray-200" />
10
      </div>
11
    </div>
12
  );
13
}

Demo

1. Navigate between categories using the tabs above.
2. Watch the instant URL update — the address bar changes immediately.
3. Notice the skeleton UI — loading placeholders match the content layout.
4. Click rapidly between tabs — previous requests are cancelled.

An artificial delay is added to make the loading state visible.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Design skeletons to match the final content dimensions and reduce layout shift.
• Avoid heavy animations in loading states that distract during short loads.
• Use segment-level loading only when that specific segment needs its own fallback.

Learn More

• Loading UI and Streaming
• Instant Loading States