Cookbooks / @defer

@defer + skeleton

Base UI components are copy-in source with no vendor UI runtime package, so an @defer block splits only the widget you wrap. Pair chart, data-table, or virtual-scroll with base-skeleton as the placeholder. Scroll this chart into view (or wait for idle prefetch) to load it.

  1. Keep the heavy widget in its own file. Angular splits components that are only referenced inside an @defer block. Put the chart (or table) in a child component.
  2. Defer on viewport. Wrap the child in @defer (on viewport; prefetch on idle) so below-fold UI is not in the initial JS.
  3. Placeholder with skeleton. Use base-skeleton in @placeholder (and optionally @loading) so layout does not jump.
  4. Skip a vendor chart runtime. Base UI chart is copy-in SVG — the deferred chunk is the component you wrapped, not an extra npm UI kit.

Scroll the chart into view. Until then you should see a skeleton placeholder (in production the chart JS is not in the initial bundle; this docs server prefetches on idle, so the placeholder can be brief).

HTML

@defer (on viewport; prefetch on idle) {
  <base-chart [data]="kpiData()" />
} @placeholder {
  <base-skeleton variant="rectangular" width="100%" height="16rem" />
}