How do you show a loading state automatically while a page's data is being fetched in the App Router?

You add a file named loading.js inside the same route folder as your page, and Next.js automatically displays it while the page's server component is fetching data, giving users instant visual feedback instead of a blank screen while they wait.

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