Route-Level Loading UI
A loading.tsx file provides a route-level loading experience. Next.js can use it while the corresponding route content is being prepared.
A good loading state should resemble the final page structure. Skeleton layouts are often better than generic spinners because they reduce layout shifts and communicate what is loading.
Loading UI
export default function Loading() {
return (
<div aria-busy='true'>
<div className='skeleton skeleton-title' />
<div className='skeleton skeleton-card' />
<div className='skeleton skeleton-card' />
</div>
);
}💡 A route-level loading component provides immediate feedback while server-rendered content is being prepared.
Key Takeaways
- Loading states are part of application UX.
- Skeletons can communicate structure better than generic spinners.
- Design loading states around realistic slow paths.