Loading UI with loading.tsx in NextJS - Mini Project: Build & Apply

Loading UI with loading.tsx

📖 Scenario: You are building a Next.js app that fetches data from a server. While the data loads, you want to show a friendly loading message to users so they know the app is working.

🎯 Goal: Create a loading.tsx file that exports a simple React component showing a loading message. This component will be used automatically by Next.js during page loading.

📋 What You'll Learn

Create a functional React component named Loading in loading.tsx

The component should return a <div> with the text Loading...

Export the Loading component as the default export

Use TypeScript and React functional component syntax

💡 Why This Matters

🌍 Real World

Loading indicators improve user experience by showing feedback while data or pages load in web apps.

💼 Career

Knowing how to create loading states is essential for frontend developers working with React and Next.js frameworks.

1

Create the Loading component function

Create a functional React component named Loading using an arrow function in loading.tsx.

NextJS

// Your code here

Hint

Start by writing const Loading = () => { return null; } and export it.

2

Add a div with loading text

Inside the Loading component, return a <div> element containing the exact text Loading....

NextJS

const Loading = () => {
  // Replace null with a div containing 'Loading...'
  return null;
};

export default Loading;

Hint

Replace null with <div>Loading...</div>.

3

Add TypeScript React import

Add the import statement import React from 'react'; at the top of loading.tsx.

NextJS

// Add React import here
const Loading = () => {
  return Loading...;
};

export default Loading;

Hint

Type import React from 'react'; at the top of the file.

4

Add simple styling to center the loading text

Add a style attribute to the <div> with CSS to center the text horizontally and vertically using flexbox: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }.

NextJS

import React from 'react';

const Loading = () => {
  // Add style attribute to div to center text
  return Loading...;
};

export default Loading;

Hint

Use inline style with style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }} on the div.

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