How do loading states work in App Router?

You add a loading.js file to a route folder, and Next.js shows it instantly while that route's content loads. Next.js wraps page.js in a React Suspense boundary inside the layout, using your component as the fallback.

// app/posts/loading.js
export default function Loading() {
  return <div>Loading posts...</div>;
}

// app/posts/page.js
export default async function PostsPage() {
  // This delay will show the loading component
  await new Promise(resolve => setTimeout(resolve, 2000));
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return <PostsList posts={posts} />;
}

The page is an async Server Component, so the fallback stays on screen until its data resolves, then the real content streams in. The layout around it stays interactive, and navigation is interruptible. Next.js also prefetches the fallback, so a click shows it at once without waiting for the server.

loading.js covers the whole page. For finer control, wrap individual slow components in your own <Suspense> boundaries so the rest of the page renders sooner.