Deferrable Views (@defer)

<h1>Dashboard</h1>

<!-- Wichtig: Above-the-fold-Content NICHT defern -->
<app-summary-cards />

<!-- Below-the-fold: Heavy Chart wird erst geladen, wenn nötig -->
@defer (on viewport) {
    <app-revenue-chart [data]="chartData()" />
} @placeholder (minimum 500ms) {
    <div class="chart-skeleton" aria-busy="true">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
} @loading (after 100ms; minimum 1s) {
    <div class="spinner" role="status">
        <span class="visually-hidden">Lade Chart…</span>
    </div>
} @error {
    <p class="error">
        Das Chart konnte nicht geladen werden.
        <button (click)="retry()">Erneut versuchen</button>
    </p>
}

<!-- Default: on idle (kann weggelassen werden) -->
@defer {
    <app-idle-only />
}

<!-- Viewport: lädt, sobald sichtbar -->
@defer (on viewport) {
    <app-comments />
} @placeholder { <div class="comments-skeleton"></div> }

<!-- Interaction: lädt erst beim Klick -->
@defer (on interaction) {
    <app-emoji-picker />
} @placeholder { <button>Emoji wählen</button> }

<!-- Hover: Tooltip-Vorschau -->
@defer (on hover) {
    <app-rich-tooltip />
} @placeholder { <span class="tooltip-trigger">?</span> }

<!-- Timer: 3 Sekunden nach Render -->
@defer (on timer(3s)) {
    <app-newsletter-modal />
}

<!-- Kombiniert: idle ODER hover, was zuerst kommt -->
@defer (on idle; on hover) {
    <app-related-articles />
} @placeholder { <div class="related-skeleton"></div> }

<!-- Custom-Bedingung -->
@defer (when user.isPremium()) {
    <app-premium-features />
}

<button #openBtn (click)="show.set(true)">
    Hilfe öffnen
</button>

@if (show()) {
    @defer (on interaction(openBtn); prefetch on hover(openBtn)) {
        <app-help-dialog (close)="show.set(false)" />
    } @placeholder {
        <div class="dialog-skeleton" role="dialog" aria-busy="true"></div>
    }
}

<article>
    <p>Langer Artikel-Text…</p>
    <div #commentsSentinel style="height: 1px"></div>

    @defer (on viewport(commentsSentinel)) {
        <app-comments [postId]="postId()" />
    } @placeholder {
        <div class="comments-skeleton">Kommentare werden geladen…</div>
    }
</article>

@defer (on viewport) {
    <app-product-grid [items]="items()" />
} @placeholder (minimum 300ms) {
    <!-- Wird mind. 300ms gezeigt, auch bei Cache-Hit -->
    <div class="grid-skeleton">
        @for (i of [1,2,3,4,5,6]; track i) {
            <div class="card-skeleton"></div>
        }
    </div>
} @loading (after 200ms; minimum 500ms) {
    <!-- Erst nach 200ms sichtbar, dann mind. 500ms -->
    <div class="loading-overlay" role="status">
        <span>Lade Produkte…</span>
    </div>
}

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-checkout',
    standalone: true,
    template: `
        <h1>Warenkorb</h1>
        <ul>
            @for (item of cart(); track item.id) {
                <li>{{ item.name }} – {{ item.price | currency }}</li>
            }
        </ul>

        <button #payBtn (click)="startPay.set(true)">
            Zur Kasse
        </button>

        @if (startPay()) {
            @defer (on immediate; prefetch on hover(payBtn)) {
                <app-payment-flow [cart]="cart()" />
            } @placeholder {
                <div class="payment-skeleton"></div>
            } @error {
                <p>Zahlungsmodul nicht verfügbar.</p>
            }
        }
    `
})
export class CheckoutComponent {
    cart = signal<CartItem[]>([]);
    startPay = signal(false);
}

interface CartItem { id: string; name: string; price: number; }

import { ApplicationConfig } from '@angular/core';
import {
    provideClientHydration,
    withIncrementalHydration
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
    providers: [
        provideClientHydration(withIncrementalHydration())
        // withEventReplay() ist automatisch aktiv
    ]
};

<!-- Vom Server gerendert, hydriert erst beim Sichtbar-Werden -->
@defer (hydrate on viewport) {
    <app-comments [postId]="postId()" />
} @placeholder {
    <div>Kommentare</div>
}

<!-- Initial vom Client gelazyloadet, danach hydriert per Klick -->
@defer (on idle; hydrate on interaction) {
    <app-share-widget />
}

<!-- Nie hydrieren – reines HTML aus dem SSR -->
@defer (hydrate never) {
    <app-static-footer />
}

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

@Component({
    selector: 'app-dashboard',
    standalone: true,
    imports: [HeavyChartComponent],
    template: `
        <!-- ❌ Diese Referenz ist eager – HeavyChart landet im Haupt-Bundle! -->
        <app-heavy-chart [data]="summary()" />

        @defer (on viewport) {
            <!-- @defer ist hier wirkungslos, weil oben schon eager referenziert -->
            <app-heavy-chart [data]="details()" />
        }
    `
})
export class DashboardComponent { /* … */ }