Loading UI with loading.tsx in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this loading.tsx component display during page load?

Consider this loading.tsx file in a Next.js app directory. What will the user see while the page is loading?

NextJS

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

A A visible message: 'Loading content, please wait...' with screen reader announcement.

B Nothing is displayed because the component returns null.

C An error occurs because the component lacks a React import.

D A spinner icon is shown automatically by Next.js without custom code.

💡 Hint

Check what the component returns and the role attribute used.

The component returns a div with a loading message and role="status" which announces updates to screen readers. This means the message is visible and accessible during loading.

📝 Syntax

intermediate

Which loading.tsx code snippet correctly defines a loading component in Next.js 14+?

Choose the correct syntax for a loading component in Next.js 14+ using TypeScript.

A

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

B

export const Loading = () => {
  return <p>Loading...</p>;
};

C

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

D export default Loading = () => <p>Loading...</p>;

💡 Hint

Next.js expects a default export function named Loading.

Next.js 14+ requires a default exported function named Loading in loading.tsx. Option A matches this pattern exactly.

❓ state_output

advanced

What happens if loading.tsx uses useState inside the loading component?

Given this loading.tsx code, what is the output or behavior during loading?

import { useState, useEffect } from 'react';

'use client';

export default function Loading() {
  const [dots, setDots] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      setDots(d => (d.length < 3 ? d + '.' : ''));
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return 
Loading{dots}
;
}

A The dots appear instantly and do not animate.

B The component throws an error because hooks cannot be used in loading.tsx.

C The loading message cycles through 'Loading', 'Loading.', 'Loading..', 'Loading...' every 500ms.

D The loading message stays static as 'Loading' without dots.

💡 Hint

Think about how useState and useEffect work together to update UI over time.

The component uses a timer to add dots up to three, then resets. This creates an animated loading message cycling every 500ms.

🔧 Debug

advanced

Why does this loading.tsx cause a hydration mismatch error?

Examine this loading.tsx code snippet. Why does Next.js show a hydration mismatch warning?

'use client';

export default function Loading() {
  const date = new Date();
  return 
Loading at {date.toLocaleTimeString()}
;
}

A Because the loading component must return null, not JSX.

B Because the loading component renders different content on server and client due to dynamic date/time.

C Because the component is missing a key prop on the div element.

D Because the date object is not serializable and causes a runtime error.

💡 Hint

Consider what happens when server and client render different outputs.

The date/time changes between server render and client hydration, causing React to detect a mismatch in the HTML content.

🧠 Conceptual

expert

What is the main purpose of loading.tsx in Next.js 14+ app router?

Choose the best explanation for why Next.js uses a loading.tsx file in the app directory.

A To preload all data before rendering the page, blocking UI until ready.

B To replace the default 404 page with a custom loading spinner.

C To handle errors during page rendering and display fallback UI.

D To show a temporary UI while a route or segment is loading asynchronously, improving user experience.

💡 Hint

Think about what users see when navigating between pages that take time to load.

The loading.tsx file provides a way to show a loading indicator while Next.js fetches data or code for a route, so users get immediate feedback instead of a blank screen.

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