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.

Practice

1. What is the main purpose of a loading.tsx file in a Next.js app?

easy

A. To style the app using CSS

B. To define the main layout of the app

C. To handle API requests and responses

D. To show a loading indicator automatically while a page or component is loading

Solution

1. Step 1: Understand the role of loading.tsx in Next.js

   The loading.tsx file is used to display a loading UI automatically during page or component loading.

2. Step 2: Differentiate from other files

   It is not for layout, API handling, or styling, which are handled by other files.

3. Final Answer:

   To show a loading indicator automatically while a page or component is loading -> Option D

4. Quick Check:

   loading.tsx shows loading UI = A [OK]

Hint: loading.tsx shows loading UI during waits [OK]

Common Mistakes:

• Confusing loading.tsx with layout.tsx
• Thinking loading.tsx handles API calls
• Assuming loading.tsx is for styling

2. Which of the following is the correct way to export a loading component in loading.tsx for Next.js?

easy

A. const Loading = () => { Loading... }; export default Loading;

B. function Loading() { return Loading...; } export Loading;

C. export default function Loading() { return Loading...; }

D. export Loading = () => Loading...;

Solution

1. Step 1: Check correct export syntax

   In Next.js, the loading component should be exported as default using export default function or export default const.

2. Step 2: Validate JSX return

   The function must return JSX properly with parentheses or directly.

3. Final Answer:

   export default function Loading() { return

   Loading...

   ; } -> Option C

4. Quick Check:

   Default export function with return JSX = D [OK]

Hint: Use 'export default function' with return JSX [OK]

Common Mistakes:

• Forgetting default keyword in export
• Incorrect arrow function syntax without return
• Using invalid export syntax

3. Given this loading.tsx component:

export default function Loading() {
  return 
Loading data...
;
}

What will the user see while the page is loading?

medium

A. A div with text 'Loading data...' announced politely by screen readers

B. Nothing, because the component is missing a spinner

C. An error because role and aria-live are invalid here

D. A blank page until loading finishes

Solution

1. Step 1: Analyze the JSX output

   The component returns a div with text 'Loading data...' and accessibility roles.

2. Step 2: Understand accessibility roles

   The role="status" and aria-live="polite" announce the text to screen readers politely.

3. Final Answer:

   A div with text 'Loading data...' announced politely by screen readers -> Option A

4. Quick Check:

   Accessible loading text shown = C [OK]

Hint: Look for role and aria-live for accessibility clues [OK]

Common Mistakes:

• Assuming no output without spinner
• Thinking aria-live causes errors
• Ignoring accessibility roles

4. This loading.tsx file is not showing the loading UI as expected:

export default function Loading() {
  
Loading...
}

What is the problem?

medium

A. The function does not return the JSX element

B. The component name must be lowercase

C. Missing import of React

D. Using <p> inside loading.tsx is not allowed

Solution

1. Step 1: Check function syntax

   The function body has JSX but no return statement, so nothing is rendered.

2. Step 2: Confirm React import is optional in Next.js 13+

   React import is not required for JSX in Next.js 13+, so it's not the issue.

3. Final Answer:

   The function does not return the JSX element -> Option A

4. Quick Check:

   Missing return causes no output = B [OK]

Hint: Always return JSX from your component function [OK]

Common Mistakes:

• Forgetting to return JSX
• Thinking React import is mandatory
• Believing lowercase component names are valid

5. You want to create a loading UI that shows a spinner and the text "Please wait..." with proper accessibility in loading.tsx. Which code snippet correctly implements this?

hard

A. export default function Loading() {
return Please wait...;
}

B. export default function Loading() {
return Please wait...;
}

C. export default function Loading() {
return Please wait...;
}

D. export default function Loading() {
return Please wait...;
}

Solution

1. Step 1: Identify correct ARIA roles for loading UI

   The role="status" with aria-live="polite" announces updates politely without interrupting.

2. Step 2: Check spinner accessibility

   The spinner has aria-hidden="true" so screen readers ignore it, focusing on text.

3. Step 3: Confirm semantic structure

   The div wraps spinner and text properly for screen readers and visual users.

4. Final Answer:

   export default function Loading() { return <div role="status" aria-live="polite"><span className="spinner" aria-hidden="true"></span><span>Please wait...</span></div>; } -> Option B

5. Quick Check:

   Use role=status + aria-live=polite + aria-hidden spinner = A [OK]

Hint: Use role=status and aria-live=polite for accessible loading [OK]

Common Mistakes:

• Using role=alert which interrupts screen readers
• Missing aria-hidden on spinner
• Not using any ARIA roles for loading