Problem Statement
How do you implement loading states in App Router using loading.js and Suspense?
Explanation
Create a loading.js file that exports a component showing your loading UI like a spinner or skeleton, which Next.js automatically wraps around the page.js in a Suspense boundary to display while content loads. You can have multiple loading.js files at different route segments for granular loading states, and the nearest loading boundary shows while that segment loads. For more control, manually wrap specific components in Suspense boundaries with custom fallbacks to stream different parts of the page independently, showing instant feedback for fast sections while slower data fetches continue. The streaming approach sends the HTML shell immediately with loading states, then progressively streams in content as it becomes available, dramatically improving perceived performance especially on slow network connections or expensive data fetching operations.
Practice Sets
This question appears in the following practice sets: