Loading UI with loading.tsx in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of loading.tsx in a Next.js app?

loading.tsx is a special file used to show a loading indicator while a page or component is loading. It improves user experience by giving feedback that something is happening.

beginner

Where should you place the loading.tsx file in a Next.js app?

You place loading.tsx inside the folder of the route or layout where you want the loading UI to appear. For example, inside app/dashboard/loading.tsx to show loading for the dashboard route.

intermediate

How does Next.js use loading.tsx automatically?

Next.js detects loading.tsx files in your app folder and shows their content automatically during page or segment loading without extra code.

beginner

What kind of UI should you put inside loading.tsx?

You should put simple, lightweight UI like spinners, skeletons, or text that tells users the page is loading. Keep it fast and accessible.

intermediate

Can loading.tsx use React hooks like useState or useEffect?

No, loading.tsx is a server component by default in Next.js 13+. It cannot use client-only hooks unless you mark it as a client component with 'use client'.

What does Next.js show automatically when a loading.tsx file exists in a route folder?

A A loading UI while the page loads

B An error message

C The full page content immediately

D Nothing, you must call it manually

Next.js automatically shows the loading UI from loading.tsx during page or segment loading.

Where do you put loading.tsx to show loading for the entire app?

A Inside <code>public</code> folder

B Inside the root <code>app</code> folder

C Inside <code>pages</code> folder

D Inside <code>components</code> folder

Placing loading.tsx inside the root app folder shows loading UI for the whole app.

Which of these is a good UI choice for loading.tsx?

A A full navigation menu

B A login form

C A large image gallery

D A spinner or skeleton screen

Spinners or skeleton screens are lightweight and clearly show loading state.

Can loading.tsx use client-side React hooks by default?

A Only <code>useState</code>, not <code>useEffect</code>

B Yes, always

C No, unless marked with 'use client'

D Only in Next.js 12

By default, loading.tsx is a server component and cannot use client hooks unless you add 'use client'.

What happens if you don't add a loading.tsx file in your Next.js app?

A Next.js shows a blank screen or default fallback during loading

B The app crashes

C The page loads instantly with no feedback

D Next.js shows an error

Without loading.tsx, Next.js shows a blank or default fallback UI during loading.

Explain how loading.tsx improves user experience in a Next.js app.

Think about what users see while waiting for content.

Describe where and how to use loading.tsx in a Next.js app.

Consider file location and component type.