The special file loading.js helps 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 streams in. The new content is automatically swapped in once complete.
export default function Loading() {
// Or a custom loading skeleton component
return <p>Loading...</p>
}Inside the loading.js file, you can add any light-weight loading UI. You may find it helpful to use the React Developer Tools to manually toggle Suspense boundaries.
By default, this file is a Server Component - but can also be used as a Client Component through the "use client" directive.
Loading UI components do not accept any parameters.
Behavior NavigationAn 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 will automatically wrap the page.js file and any children below in a <Suspense> boundary.
generateMetadata to complete before streaming UI to the client. This guarantees the first part of a streamed response includes <head> tags.When streaming, a 200 status code will be returned to signal that the request was successful.
The server can still communicate errors or issues to the client within the streamed content itself, for example, when using redirect or notFound. Since the response headers have already been sent to the client, the status code of the response cannot be updated. This does not affect SEO.
Some browsers buffer a streaming response. You may not see the streamed response until the response exceeds 1024 bytes. This typically only affects “hello world” applications, but not real applications.
Platform SupportLearn how to configure streaming when self-hosting Next.js.
Examples Streaming with SuspenseIn addition to loading.js, you can also manually create Suspense Boundaries for your own UI components. The App Router supports streaming with Suspense .
<Suspense> works by wrapping a component that performs an asynchronous action (e.g. fetch data), showing fallback UI (e.g. skeleton, spinner) while it's happening, and then swapping in your component once the action completes.
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
export default function Posts() {
return (
<section>
<Suspense fallback={<p>Loading feed...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>Loading weather...</p>}>
<Weather />
</Suspense>
</section>
)
}By using Suspense, you get the benefits of:
For more Suspense examples and use cases, please see the React Documentation .
Version History Version Changesv13.0.0 loading introduced.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4