Loading

Loading components are used to render a loading state while the page is being fetched.

You can define a custom loading component by creating a route definition file for any path by using the same rules like normal route files, but named loading.jsx. This file will be used to render the loader component while the page is being fetched.

// (root).loading.jsx

export default function Loading() {
  return <div>Loading...</div>;
}

When you add a loading component or a fallback error component beside your layout, the router will enable partial pre-rendering for the page it renders automatically. To disable partial pre-rendering, add prerender: false to your react-server.config.mjs. See more details at Partial pre-rendering.

Warning: you can define an error boundary, error fallback or loading component only for layouts, not for pages.