Defer a heavy Angular chart and test every loading state

Place a heavy analytics chart behind an interaction-triggered @defer block. Prefetch during idle, keep a fixed-size placeholder to prevent layout shift, and provide accessible loading and error states. Write a manual defer-block test that renders placeholder, loading, error, and complete states without downloading a real chart chunk.

initial -> placeholder with "Load chart" button
interaction -> loading status
chunk succeeds -> chart renders
chunk fails -> visible retry guidance

• Render only after explicit interaction.
• Prefetch independently during idle.
• Reserve meaningful dimensions in every state.
• Use status and alert semantics for loading and failure.
• Configure manual defer behavior in the focused state test.

1. Wrap the chart in @defer with interaction and idle-prefetch triggers.
2. Give the placeholder the same layout container as the completed chart.
3. Add loading and error sub-blocks with user-readable semantics.
4. Compile the TestBed component and obtain its defer-block fixture.
5. Render each state manually and assert its accessible content.

import {Component} from '@angular/core';
import {DeferBlockBehavior, DeferBlockState, TestBed} from '@angular/core/testing';

@Component({
  imports: [HeavyChart],
  styles: [`.chart-shell { min-height: 20rem; }`],
  template: `
    <section class="chart-shell" aria-labelledby="chart-title">
      <h2 id="chart-title">Request volume</h2>
      @defer (on interaction; prefetch on idle) {
        <app-heavy-chart />
      } @placeholder {
        <button type="button">Load chart</button>
      } @loading {
        <p role="status">Loading chart…</p>
      } @error {
        <p role="alert">The chart could not load. Try again later.</p>
      }
    </section>
  `,
})
class AnalyticsPanel {}

it('exposes every deferred state', async () => {
  TestBed.configureTestingModule({
    imports: [AnalyticsPanel],
    deferBlockBehavior: DeferBlockBehavior.Manual,
  });
  await TestBed.compileComponents();
  const fixture = TestBed.createComponent(AnalyticsPanel);
  await fixture.whenStable();
  const block = (await fixture.getDeferBlocks())[0];

  expect(fixture.nativeElement.textContent).toContain('Load chart');
  await block.render(DeferBlockState.Loading);
  expect(fixture.nativeElement.querySelector('[role=status]')).not.toBeNull();
  await block.render(DeferBlockState.Error);
  expect(fixture.nativeElement.querySelector('[role=alert]')).not.toBeNull();
  await block.render(DeferBlockState.Complete);
  expect(fixture.nativeElement.querySelector('app-heavy-chart')).not.toBeNull();
});

The wrapper has constant client work; the chart code and rendering cost move out of the initial bundle until the trigger.

• Manual state tests do not prove real browser trigger timing, so one browser journey should exercise interaction.
• Prefetch may still consume bandwidth even if the user never renders the chart.
• Nested defer blocks need distinct triggers to avoid request cascades.
• The placeholder must remain useful without pointer hover.

• Verify the initial DOM contains no chart component.
• Render the error state and confirm it is announced as an alert.
• Measure placeholder and complete container dimensions for layout stability.
• Use a browser test to activate the placeholder button from the keyboard.

• Using the default idle render trigger loads the chart without user intent.
• A zero-height placeholder causes a large layout shift.
• Testing only the complete state leaves loading and error UX unowned.
• Hover-only interaction excludes keyboard and touch users.