Loading UI with loading.tsx in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple loading component that shows a message.

NextJS

export default function Loading() {
  return <div>[1]</div>;
}

Drag options to blanks, or click blank then click option'

A"Complete"

B"Loaded"

C"Error"

D"Loading..."

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the message inside quotes.

Using a message that does not indicate loading.

The loading component should display the message "Loading..." inside a div.

2fill in blank

medium

Complete the code to import React and define the loading component properly.

NextJS

import [1] from 'react';

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

Drag options to blanks, or click blank then click option'

AReact

BComponent

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks unnecessarily.

Not importing React at all.

Importing React is standard to use JSX syntax in Next.js components.

3fill in blank

hard

Fix the error in the loading component to return a valid React element.

NextJS

export default function Loading() {
  return [1];
}

Drag options to blanks, or click blank then click option'

A"Loading..."

B<div>Loading...</div>

CLoading...

Dreturn <div>Loading...</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a plain string instead of JSX.

Including 'return' inside the return expression.

The component must return a JSX element, like <div>Loading...</div>.

4fill in blank

hard

Fill both blanks to create a loading component that uses a spinner and a message.

NextJS

export default function Loading() {
  return (
    <div className=[1] aria-live="polite">
      <span className=[2]></span>
      Loading...
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A"spinner-container"

B"spinner"

C"loading-text"

D"container"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up class names between container and spinner.

Forgetting the aria-live attribute for accessibility.

The outer div uses a container class, and the span uses a spinner class for styling the spinner.

5fill in blank

hard

Fill all three blanks to create a loading.tsx with a functional spinner using Tailwind CSS classes.

NextJS

export default function Loading() {
  return (
    <div className=[1] role="status" aria-live="polite">
      <svg className=[2] viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle className=[3] cx="50" cy="50" r="45" stroke="#e5e7eb" strokeWidth="10" />
      </svg>
      <span className="sr-only">Loading...</span>
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A"flex justify-center items-center h-20"

B"animate-spin h-8 w-8 text-blue-600"

C"opacity-25"

D"text-center text-lg font-bold"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong Tailwind classes that don't animate or center properly.

Missing role and aria-live attributes for accessibility.

The outer div centers the spinner, the svg spins with animation, and the circle has reduced opacity for the spinner effect.

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