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.

Instant Loading States

An instant loading state is fallback UI that is shown immediately upon navigation. You can 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.

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.

Good to know:

• Navigation is immediate, even with server-centric routing.
• Navigation is interruptible, meaning changing routes does not need 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 for your own UI components.

Recommendation: Use the loading.js convention for route segments (layouts and pages) as Next.js optimizes this functionality.

To learn how to use Suspense Boundaries, see the React Documentation.

Next Steps