Loading UI with loading.tsx in NextJS - Step-by-Step Execution

Concept Flow - Loading UI with loading.tsx

Page starts loading

↓

Next.js detects loading.tsx

↓

Render loading.tsx component

↓

Show loading UI to user

↓

Page finishes loading

↓

Replace loading UI with actual page content

When a page is loading, Next.js shows loading.tsx UI first, then replaces it with the page once ready.

Execution Sample

NextJS

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

This code shows a simple loading message while the page loads.

Execution Table

Step	Action	Component Rendered	UI Shown	Next Action
1	User navigates to page	No component yet	Blank or previous page	Start loading page
2	Next.js detects loading.tsx	Loading component	<p>Loading...</p>	Wait for page data
3	Page data loads	Page component	Actual page content	Replace loading UI
4	Loading UI removed	Page component	Page fully visible	User interacts with page

💡 Page finishes loading, loading.tsx UI replaced by actual page content

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
UI State	None	Loading message shown	Page content ready	Page content shown

Key Moments - 2 Insights

Why do we see loading.tsx UI before the page content?

Because Next.js renders loading.tsx immediately when the page starts loading, as shown in step 2 of the execution_table.

When does the loading UI disappear?

The loading UI disappears right after the page data finishes loading and the page component renders, as shown in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what UI is shown at step 2?

A Actual page content

B Loading message <p>Loading...</p>

C Blank screen

D Error message

💡 Hint

Check the 'UI Shown' column at step 2 in the execution_table

At which step does the page content replace the loading UI?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Next Action' and 'UI Shown' columns in the execution_table

If loading.tsx was missing, what would happen at step 2?

A Loading message still shows

B Page content shows immediately

C Blank or previous page remains until load finishes

D Error occurs

💡 Hint

Think about what Next.js renders if loading.tsx is not present during loading

Concept Snapshot

Loading UI with loading.tsx in Next.js:
- Create loading.tsx exporting a React component
- Next.js shows this UI during page loading
- Loading UI replaces blank or previous content
- When page loads, loading UI is replaced by page
- Helps users know app is working

Full Transcript

In Next.js, when a user navigates to a page, the app starts loading the page data. During this time, Next.js checks if a loading.tsx file exists. If it does, Next.js renders the loading.tsx component immediately, showing a loading UI such as a message or spinner. This informs the user that the page is loading. Once the page data finishes loading, Next.js replaces the loading UI with the actual page content. This process improves user experience by providing feedback during loading times.