Loading UI with loading.tsx in NextJS - Performance & Optimization

Performance: Loading UI with loading.tsx

MEDIUM IMPACT

This affects the perceived page load speed and interaction responsiveness by showing a placeholder UI during data fetching or component loading.

Showing a loading indicator while waiting for data or components

NextJS

export default function Loading() {
  return <div aria-busy="true" aria-label="Loading content" style={{fontSize: '1.2rem'}}>Loading...</div>;
}

Simple text or minimal placeholder uses less CPU and paints quickly, improving perceived speed.

📈 Performance Gainsingle paint, reduces blocking time by 80+ ms

Showing a loading indicator while waiting for data or components

NextJS

export default function Loading() {
  return <div>Loading full spinner with heavy SVG and animations</div>;
}

Heavy animations and large SVGs block rendering and increase CPU usage, delaying main content paint.

📉 Performance Costblocks rendering for 100+ ms, triggers multiple paints

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy animated spinner in loading.tsx	Moderate (multiple nodes)	Multiple reflows due to animation	High paint cost	[X] Bad
Simple text or minimal placeholder in loading.tsx	Low (single node)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

The loading.tsx component renders immediately during data fetching or lazy loading, allowing the browser to paint a placeholder before the main content is ready.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage if loading UI is complex or animated

Core Web Vital Affected

LCP

This affects the perceived page load speed and interaction responsiveness by showing a placeholder UI during data fetching or component loading.

Optimization Tips

1Keep loading.tsx UI simple and lightweight to speed up first paint.

2Avoid heavy animations or large images in loading.tsx to reduce paint cost.

3Use ARIA attributes in loading.tsx for accessibility without performance penalty.

Performance Quiz - 3 Questions

What is the main performance benefit of using a simple loading.tsx UI?

A It reduces the time to first paint by showing a lightweight placeholder

B It increases bundle size to include animations

C It delays rendering until all data is loaded

D It triggers multiple reflows to update the UI

DevTools: Performance

How to check: Record a performance profile while loading the page with loading.tsx active. Look for long paint times and multiple layout shifts.

What to look for: Check for quick first paint of loading UI and minimal layout shifts to confirm good performance.