loading.js in Next.js

loading.js provides instant UI feedback while a route is loading.

Definition

loading.js is a special file that shows fallback UI while data or components are loading.

Why we use it

• Improves perceived performance
• Avoids blank screens
• Enhances user experience

When to use

When pages fetch data or load heavy components.

Example Code

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

Real-World Example

An analytics dashboard shows a spinner while fetching reports.

Interview Tip

loading.js provides built-in Suspense fallback UI for smoother page transitions.