Loading UI

Next.js 13 introduced a new file convention, loading.js, to help you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.

Loading UI

Instant Loading States

Instant Loading States allow you to pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.

Create a loading state by adding a loading.js file inside a folder.

Instant Loading States
app/dashboard/loading.tsx
export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

In the same folder, loading.js will be nested inside layout.js. It'll wrap the page.js file and any children below in a <Suspense> boundary.

How loading.js works

Good to know:

  • Navigation is immediate, even with server-centric routing.
  • Navigation is interruptible, meaning does not have to wait for the content of the route to fully load before navigating to another route.
  • Shared layouts remain interactive while new route segments load.

Manually Defining Suspense Boundaries

In addition to loading.js, you can also manually create Suspense Boundaries.

Unlike loading.js, where navigation happens immediately and loading UI is displayed before the request to the server is complete. When manually defining Suspense Boundaries, navigation will happen after the new segment loads.

Recommendation: Use the loading.js convention for route segments (layouts and pages) as Next.js optimizes this functionality. We recommend using Suspense Boundaries in your own components.

To learn how to create Suspense Boundaries and stream content, see the Streaming and Suspense page.

Next Steps