How do loading states work in App Router?

Beginner

Answer

Create a loading.js file to show loading UI while the page loads:

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

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