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.