The loading.tsx file is a special file in Next.js that will be used as the loading fallback (via React Suspense) whilst the content of the route segment streams in.

So suppose you have a page at src/app/articles/page.tsx. To add a loading state for that page, you can add a src/app/articles/loading.tsx file that provides a component as a default export:

export default function Loading() {
  // Or a custom loading skeleton component
  return <p>Loading...</p>
}

Now, if your src/app/articles/page.tsx file takes 2 seconds to load, the component from loading.tsx will be displayed until the page contents are ready.

You can use the React Developer tools to manually toggle Suspense boundaries and test your loading screen.