Describe loading.js.

0-2 years experience

1. 1Imagine 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. 2We 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. 1We 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. 2A 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. 1We 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. 2In 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. 1We 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. 2When 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?