Loading and Error States

Implement loading.tsx and error.tsx files for better UX with skeleton screens and error boundaries.

20 min

3 sections

error

01. Loading UI

Section 1 of 3

Create loading.tsx to show an instant loading state while your page loads. Great for improved perceived performance.

typescript

// app/blog/loading.tsx
export default function Loading() {
  return (
    <div className="space-y-4">
      <div className="h-8 w-48 animate-pulse bg-muted rounded" />
      <div className="h-4 w-full animate-pulse bg-muted rounded" />
      <div className="h-4 w-3/4 animate-pulse bg-muted rounded" />
    </div>
  );
}

Exercise

Create a Loading Skeleton

Practice

Create a loading.tsx file in the app/blog directory with skeleton UI that matches your blog post layout.

Navigation and Linking

Data Fetching Fundamentals

Back to Course