Create a Loading State with loading.tsx

Next.js

React

JavaScript

Technical Specification

Add a loading.tsx file to show a loading UI while a route segment is fetching data.

Input/Output Samples

Input:navigate to /users

Output:Loading UI before data appears

Optimal Logic Path

// app/users/loading.tsx
export default function Loading() {
  return <p>Loading users...</p>;
}

Architectural Deep-Dive

The loading component is automatically shown while the segment is streaming or fetching.