An Angular page nests @defer blocks three levels deep, and the network panel shows their chunks loading one after another; why, and how do you fix it?

## Why nesting creates a waterfall An Angular **`@defer` block** is a template instruction. Its triggers are set up when the view that *contains* it is created. For a nested block, that containing view is the **main content of the outer `@defer`**, which does not exist until the outer block has fetched its dependencies and rendered. ```html @defer { <!-- level 1: default on idle --> <app-course-body /> @defer { <!-- level 2 --> <app-transcript /> @defer { <!-- level 3 --> <app-quiz-panel /> } } } ``` The sequence is strictly serial: 1. Idle time: fetch level 1's chunk, render it. 2. Level 2 now exists; on the next idle period, fetch its chunk, render it. 3. Level 3 now exists; fetch its chunk, render it. Each step includes a network round trip that could not start earlier, because the browser had no way to know about the inner chunk. This is the **cascading load** the Angular documentation warns about: nested blocks should have **different triggers** so they do not load in immediate succession. ## Diagnosing it - The **network waterfall** shows chunk requests starting only after the previous one finished, with nothing in parallel. - In the template, the same trigger (or the implicit `on idle`) at every level is the giveaway. - Removing a level and rebuilding should remove one step from the waterfall; if it does not, the chunk was not really separate (check the deferral rules first). ## Fixes | Situation | Fix | |---|---| | Inner content always needed with the outer content | remove the inner `@defer`; its dependencies join the outer chunk | | Inner content optional or below the fold | give it a later, user-driven trigger: `on interaction`, `on viewport` of a lower element, `on hover` | | Inner content likely needed soon | keep the inner block but prefetch it on a trigger that fires once the outer has rendered | | Deep nesting for organisation only | flatten into sibling blocks at one level so their triggers register together | Sibling `@defer` blocks at the same level register their triggers when their shared parent view is created, so they can fetch **in parallel**. Nesting is what serialises them. ## Shared dependencies If two blocks (nested or siblings) use the same component, Angular and the bundler share that code rather than downloading it twice; the 22.2 compiler also deduplicates deferred imports shared by several blocks. Sharing avoids duplicate bytes, but it does not break a cascade: the inner block's request still cannot start before it exists. ## A worked fix For the course page above, the transcript is always shown with the body, and the quiz is at the bottom and optional: ```html @defer { <app-course-body /> <app-transcript /> @defer (on viewport; prefetch on idle) { <app-quiz-panel /> } @placeholder { <div class="quiz-skeleton"></div> } } ``` - Level 2 is gone: `app-transcript` now loads with the body in one chunk. - The quiz keeps its own block, but with a **viewport** trigger it only renders when reached; `prefetch on idle` fetches its chunk in the first idle period after the outer block renders, so scrolling down finds it ready. - Two round trips remain on the worst path instead of three, and the second is off the critical path. ## Rules of thumb 1. Defer at the **coarsest useful boundary**: one block per independently useful section. 2. Nest only when the inner content is optional relative to the outer, and then give it a **different, later** trigger. 3. Re-check the waterfall after refactors; a new wrapper component with its own `@defer` can add a level without anyone noticing.