Loading UI with loading.tsx in NextJS

Introduction

Loading UI shows users that something is happening while the page or data is loading. It helps keep users informed and improves experience.

When a page or component takes time to load data from a server.

When navigating between pages in a Next.js app to show progress.

When waiting for a slow API response before showing content.

When loading images or other resources that take time to appear.

Syntax

NextJS

export default function Loading() {
  return (
    <div role="status" aria-live="polite">
      <p>Loading...</p>
    </div>
  )
}

The Loading component is a special file named loading.tsx in Next.js app directory to show loading UI automatically.

Use semantic HTML and ARIA roles like role="status" and aria-live="polite" for accessibility.

Examples

Simple loading message without extra accessibility features.

NextJS

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

Loading UI with accessibility roles and a friendly message.

NextJS

export default function Loading() {
  return (
    <div role="status" aria-live="polite">
      <p>Loading your content, please wait.</p>
    </div>
  )
}

Loading UI with inline styles to make the text blue and bold.

NextJS

export default function Loading() {
  return (
    <div role="status" aria-live="polite" style={{ color: 'blue', fontWeight: 'bold' }}>
      <p>Loading...</p>
    </div>
  )
}

Sample Program

This is a complete loading.tsx component for Next.js. It shows a centered loading message with accessibility roles. Next.js will automatically show this UI when a page or segment is loading.

NextJS

import React from 'react'

export default function Loading() {
  return (
    <div role="status" aria-live="polite" style={{ padding: '1rem', textAlign: 'center' }}>
      <p>Loading...</p>
    </div>
  )
}

Important Notes

Place loading.tsx inside the folder of the page or layout where you want the loading UI to appear.

Next.js automatically shows this component during loading states without extra code.

Use simple text and accessibility roles so screen readers announce the loading status.

Summary

Loading UI improves user experience by showing progress during waits.

Next.js uses loading.tsx files to display loading states automatically.

Always use semantic HTML and ARIA roles for accessibility in loading components.

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