Free tools Windows power users keep installed
One-click scans. No signup required.
In Angular, a @defer block can show three optional states: @placeholder before its trigger, @loading while deferred dependencies load, and @error if those dependencies fail to load. Each block answers a different user need, and only the main content inside @defer is eligible for deferred loading.
What each block does
| Block | When it appears | What it communicates |
|---|---|---|
@placeholder |
Before the defer trigger fires. Without this block, Angular displays nothing by default. | What content will appear or what the user can expect. |
@loading |
While Angular loads deferred dependencies. It replaces the placeholder when loading begins. | That work is in progress. |
@error |
If loading deferred dependencies fails. | That the deferred content could not be loaded. |
All three blocks are optional. Angular’s deferrable views tutorial recommends providing a placeholder. The @defer API reference documents the block syntax and timing options.
As an Amazon Associate I earn from qualifying purchases.
How to write the blocks
Place the optional state blocks directly after the main @defer block:
@defer {
<article-comments />
} @placeholder (minimum 1s) {
<p>Comments will appear here.</p>
} @loading (after 500ms; minimum 1s) {
<p>Loading comments…</p>
} @error {
<p>Comments could not be loaded.</p>
}In this example, the placeholder remains visible for at least one second after it first renders. The loading template does not appear until loading has lasted 500 milliseconds; once shown, it remains visible for at least one second. Durations accept ms or s. These options can reduce a brief flash of loading UI when dependencies arrive quickly.
#1 Best Overall
Choose timing that fits the content
Use a placeholder to set expectations
The placeholder is the pre-trigger state. It can identify the coming content or reserve space for it. If the deferred section is likely to load quickly, a minimum duration can keep the placeholder from disappearing immediately.
Delay loading feedback for short waits
An after delay postpones the loading template. This avoids showing a progress message for a load that finishes almost at once. Add minimum when a loading indicator would otherwise appear and disappear too quickly to be useful.
Make errors actionable
Keep the error message specific to the failed section, and tell users what they can do next if the interface supports a recovery action. The block handles failure to load deferred dependencies; it is not documented as a general error boundary for every error thrown inside the deferred component. Without an error block, Angular documents an NG0750 error for defer dependency failures; see the NG0750 error reference.
Know what Angular actually defers
Angular defers eligible components, directives, and pipes used in the main fragment inside @defer, generating dynamic imports for them. Under the guide’s eligibility rules, those dependencies must be standalone and not referenced outside defer blocks in the same file. A dependency that does not meet the rules is eagerly loaded instead.
Rank #3
Dependencies used in @placeholder, @loading, and @error are eagerly loaded. Keep fallback UI lightweight if reducing initial bundle size is important; putting a substantial component in a state block does not defer that component.
The trigger controls when Angular loads the main fragment. The API reference lists triggers including idle, viewport, interaction, hover, immediate, timer, and a custom when condition. The state blocks describe what users see around that loading; they do not determine the trigger.
Server rendering, accessibility, and layout
With server-side rendering or static generation, Angular renders the placeholder by default—or nothing if there is no placeholder—and does not invoke defer triggers on the server. Angular’s guide describes Incremental Hydration as the configuration for rendering the main content on the server.
Assistive technology may read the placeholder or loading text first without announcing a later change. Angular suggests wrapping the block in an element with aria-live="polite" and aria-atomic="true" to help announce transitions. Choose concise status text and check that announcements are useful rather than repetitive.
Deferring content already visible in the initial viewport can increase cumulative layout shift, depending on the page and how space is reserved. Nested defer blocks with identical triggers can also lead to cascading requests. These are implementation risks, not inevitable effects of using defer blocks.
Build the three states around one lifecycle
- Use the placeholder for the period before the trigger, loading feedback only for an active wait, and the error state only for a failed dependency load.
- Set
minimumorafteronly where it improves the experience; the timing options are not a substitute for meaningful state content. - Keep fallback dependencies small and verify that the content you expect to defer meets Angular’s eligibility rules.
- Consider server-rendered output, accessible announcements, and reserved layout space when deciding what each state contains.
Angular’s documentation surfaced on October 7, 2026, describes these behaviors; check the documentation for the Angular version used by your application, since framework syntax and rendering behavior can change.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
