Problem Statement
What file do you create to show a loading state for a route segment in App Router?
Explanation
Create a loading.js file in a route segment that automatically wraps the page in a React Suspense boundary, showing the loading UI while the page content loads asynchronously. Next.js automatically handles the Suspense integration, streaming the loading UI immediately while the page or layout fetches data, then replacing it with the actual content when ready. This provides instant feedback to users during navigation or data fetching, works with both Server and Client Components, and enables streaming server rendering for better perceived performance.
Practice Sets
This question appears in the following practice sets: