Loading UI with loading.tsx in NextJS

Introduction

Loading UI shows users that something is happening while the page or data is loading. It helps keep users informed and improves experience.

When a page or component takes time to load data from a server.

When navigating between pages in a Next.js app to show progress.

When waiting for a slow API response before showing content.

When loading images or other resources that take time to appear.

Syntax

NextJS

export default function Loading() {
  return (
    <div role="status" aria-live="polite">
      <p>Loading...</p>
    </div>
  )
}

The Loading component is a special file named loading.tsx in Next.js app directory to show loading UI automatically.

Use semantic HTML and ARIA roles like role="status" and aria-live="polite" for accessibility.

Examples

Simple loading message without extra accessibility features.

NextJS

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

Loading UI with accessibility roles and a friendly message.

NextJS

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

Loading UI with inline styles to make the text blue and bold.

NextJS

export default function Loading() {
  return (
    <div role="status" aria-live="polite" style={{ color: 'blue', fontWeight: 'bold' }}>
      <p>Loading...</p>
    </div>
  )
}

Sample Program

This is a complete loading.tsx component for Next.js. It shows a centered loading message with accessibility roles. Next.js will automatically show this UI when a page or segment is loading.

NextJS

import React from 'react'

export default function Loading() {
  return (
    <div role="status" aria-live="polite" style={{ padding: '1rem', textAlign: 'center' }}>
      <p>Loading...</p>
    </div>
  )
}

Important Notes

Place loading.tsx inside the folder of the page or layout where you want the loading UI to appear.

Next.js automatically shows this component during loading states without extra code.

Use simple text and accessibility roles so screen readers announce the loading status.

Summary

Loading UI improves user experience by showing progress during waits.

Next.js uses loading.tsx files to display loading states automatically.

Always use semantic HTML and ARIA roles for accessibility in loading components.