@defer — Lazy Loading dans les templates

@defer (on viewport) {
  <!-- tout ce qui est ici (et ses dépendances) finit dans un chunk séparé -->
  <app-comments [postId]="post().id" />
} @placeholder (minimum 300ms) {
  <!-- affiché AVANT le déclenchement du trigger ; requis pour on viewport / interaction / hover -->
  <div class="comments-skeleton"></div>
} @loading (after 100ms; minimum 500ms) {
  <!-- affiché pendant le téléchargement du chunk (after : pas de scintillement si c’est rapide) -->
  <app-spinner />
} @error {
  <!-- si le téléchargement du chunk échoue -->
  <p>Impossible de charger les commentaires.</p>
}

@defer { ... }                          <!-- par défaut : on idle -->
@defer (on idle) { ... }                <!-- requestIdleCallback -->
@defer (on idle(500)) { ... }           <!-- v22 : idle, mais au plus tard après 500 ms -->
@defer (on viewport) { ... }            <!-- entre à l’écran (IntersectionObserver) -->
@defer (on viewport({ rootMargin: '200px' })) { ... }   <!-- v21 : options d’IntersectionObserver -->
@defer (on viewport(trigger)) { ... }   <!-- observe un autre élément : <div #trigger> -->
@defer (on interaction) { ... }         <!-- click / keydown sur le placeholder -->
@defer (on interaction(btn)) { ... }    <!-- click sur un élément précis (#btn) -->
@defer (on hover) { ... }               <!-- mouseenter / focusin -->
@defer (on immediate) { ... }           <!-- juste après le rendu (mais toujours lazy) -->
@defer (on timer(2s)) { ... }           <!-- après un délai -->
@defer (when isOpen()) { ... }          <!-- condition (une seule fois : true → chargement) -->
@defer (on viewport; on timer(5s)) { ... }  <!-- plusieurs triggers = OU -->

<!-- Télécharger le chunk tôt, afficher plus tard -->
@defer (on interaction; prefetch on idle) {
  <app-rich-editor />
} @placeholder {
  <button>Modifier</button>
}

<!-- Typique : prefetch on hover pour les actions « à un clic » -->
@defer (on interaction; prefetch on hover) {
  <app-share-dialog />
} @placeholder {
  <button>Partager</button>
}

// Pour qu’un bloc soit vraiment lazy (chunk séparé), ses dépendances doivent être :
//  1. standalone (par défaut désormais)
//  2. utilisées UNIQUEMENT dans des blocs @defer de ce template
//  3. non référencées autrement dans le même fichier (par ex. dans du code TS, ViewChild, etc.)

@Component({
  imports: [CommentsWidget, HeavyChart], // ok : elles n’apparaissent que dans @defer
  template: `
    @defer (on viewport) { <app-heavy-chart /> }
  `,
})
export class Dashboard {
  // ✗ cela rendrait HeavyChart « eager » — il est référencé directement dans la classe :
  // chart = viewChild(HeavyChart);
}

<!-- SSR : Hydration incrémentale — par défaut depuis la v22 (withIncrementalHydration n’est plus nécessaire) -->
@defer (hydrate on viewport) {
  <app-product-reviews />   <!-- le HTML arrive déjà rendu du serveur, le JS se charge quand il est visible -->
}

@defer (hydrate on interaction) { <app-filters /> }
@defer (hydrate never) { <app-static-footer /> }   <!-- HTML uniquement, sans JS -->

// v22 : vous pouvez personnaliser ce que signifie « idle » pour @defer et onIdle (injectAsync)
import { provideIdleServiceWith } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIdleServiceWith(MyIdleService), // par ex. une implémentation qui attend aussi le chargement des polices
  ],
};