Describe loading.js.

A loading file can create instant loading states built on Suspense.

Next.js automatically wraps your page.js component with the loading.js component. Next.js creates a Suspense boundary around your page

1
By default, this file is a Server Component - but can also be used as a Client Component through the 'use client' directive.
2
Loading UI components do not accept any parameters.

Difficulty: 6/10

Topics: React Suspense, Streaming HTML, App Router Routing

0-2 years experience

1
Imagine you have a dashboard route at /dashboard with a slow API call in its page.js. You've added a loading.js file in that folder, but when you navigate there, the sidebar in your layout.js also flickers and re-renders. How would you structure your files so the sidebar stays static while only the main content shows the loading spinner?
2
We have a page that fetches data directly inside a Server Component. If we add a loading.js file to this route, what actually happens under the hood when a user visits the page? What does the user see first, and when does the actual page content swap in?

2-5 years experience

1
We have a nested route structure: /analytics/reports/monthly. There is a loading.js at the root /analytics level, but we want a custom, faster skeleton loader specifically for /monthly. If we add a new loading.js inside the /monthly folder, how does Next.js resolve which loading state to show? Will the user see both, or just one?
2
A developer on your team complains that their loading.js spinner isn't showing up during client-side transitions (using next/link) to a dynamic route, even though the page takes 3 seconds to load. What are some common reasons why a Suspense boundary created by loading.js might not trigger during a route transition?

5-8 years experience

1
We are building an e-commerce product page where the main product details load instantly, but the 'Recommended Products' carousel takes 2 seconds due to a slow downstream service. If we use a route-level loading.js, the entire page is blocked by a skeleton. How would you refactor this to stream the carousel progressively without delaying the main product details?
2
In a high-traffic SSR application, we want to optimize our Time to First Byte (TTFB) and First Contentful Paint (FCP). How does leveraging loading.js affect these metrics compared to traditional SSR, and what are the architectural trade-offs of streaming HTML over a single, fully-rendered HTML response?

8+ years experience

1
We are migrating a massive legacy Next.js Pages Router application to the App Router. The legacy app relies heavily on a global loading spinner tied to router events (routeChangeStart). How would you design a standardized loading and streaming strategy across 50+ federated routes using App Router paradigms without forcing every product team to write boilerplate loading.js files?
2
When designing a design system for a large enterprise, how would you coordinate the relationship between skeleton loaders, loading.js boundaries, and error boundaries to prevent layout shift (CLS) and ensure a cohesive perceived performance strategy across multiple micro-frontends or monorepo packages?

❓How does loading.js interact with nested route segments that also define their own loading.js files?
❓If you want to stream a specific slow component on a page rather than suspending the entire page, how would you bypass loading.js?
❓What happens to the state of a parent layout.js when a child loading.js fallback is triggered during a route transition?