What are Deferrable Views (@defer) and how do they work in Angular 17+?

import { Component } from '@angular/core';
import { HeavyChartComponent } from './heavy-chart.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HeavyChartComponent],
  template: '<h2>Dashboard</h2>' +
    '<div style="height: 1200px;">Scroll down to see chart...</div>' +
    '@defer (on viewport) {' +
    '  <app-heavy-chart></app-heavy-chart>' +
    '} @placeholder {' +
    '  <div class="skeleton">Loading placeholder...</div>' +
    '} @loading {' +
    '  <p>Fetching chart bundle...</p>' +
    '} @error {' +
    '  <p>Failed to load chart dependencies.</p>' +
    '}'
})
export class AppComponent {}