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

Need a 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;

Need a 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;

Need a 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;

Need a hint?

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