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.