Fix CLS in Angular

// product-card.component.ts
import { Component, input } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <!-- Bad: bare img collapses to 0x0, shifts content when loaded -->
    <img [src]="product().imageUrl" [alt]="product().name" />

    <!-- Good: NgOptimizedImage reserves 400x300 before fetch -->
    <img
      [ngSrc]="product().imageUrl"
      [alt]="product().name"
      width="400"
      height="300"
      style="width: 100%; height: auto;"
    />

    <!-- For the LCP image: add priority to preload -->
    <img
      [ngSrc]="product().imageUrl"
      [alt]="product().name"
      width="800"
      height="600"
      priority
      style="width: 100%; height: auto;"
    />
  `,
})
export class ProductCardComponent {
  product = input.required<{ imageUrl: string; name: string }>();
}

import { Component, OnInit, AfterViewInit,
         ChangeDetectorRef, inject, signal } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    <section [class.expanded]="isExpanded()">
      <h2>{{ title() }}</h2>
    </section>
  `,
})
export class DashboardComponent implements OnInit, AfterViewInit {
  private cdr = inject(ChangeDetectorRef);
  private dataService = inject(DataService);

  title = signal('');
  isExpanded = signal(false);

  // Good: data fetching in ngOnInit -- no post-paint layout change
  ngOnInit(): void {
    this.dataService.getTitle().subscribe(t => this.title.set(t));
  }

  // Bad: layout mutation after initial render causes CLS
  // ngAfterViewInit(): void {
  //   this.isExpanded.set(true); // shifts siblings after paint
  // }

  // If unavoidable -- flush in the same frame
  ngAfterViewInit(): void {
    if (this.dataService.shouldExpand()) {
      this.isExpanded.set(true);
      this.cdr.detectChanges(); // flush synchronously, same frame
    }
  }
}

import { Component, signal } from '@angular/core';
import {
  trigger, state, style, transition, animate
} from '@angular/animations';

@Component({
  selector: 'app-notification',
  standalone: true,
  animations: [
    trigger('slideIn', [
      // Bad: animating margin causes layout recalculation per frame
      // state('hidden', style({ marginTop: '-60px', opacity: 0 })),
      // state('visible', style({ marginTop: '0', opacity: 1 })),

      // Good: transform is compositor-only, zero CLS impact
      state('hidden', style({ transform: 'translateY(-60px)', opacity: 0 })),
      state('visible', style({ transform: 'translateY(0)', opacity: 1 })),
      transition('hidden => visible', animate('300ms ease-out')),
      transition('visible => hidden', animate('200ms ease-in')),
    ]),
  ],
  template: `
    <div [@slideIn]="visible() ? 'visible' : 'hidden'" class="notification">
      Changes saved successfully
    </div>
    <button (click)="toggle()">Toggle</button>
  `,
})
export class NotificationComponent {
  visible = signal(false);
  toggle(): void { this.visible.update(v => !v); }
}

<!-- Bad: @defer block expands from zero, shifts content below -->
@defer (on viewport) {
  <app-comments-section />
}

<!-- Good option 1: wrapper with min-height matching component -->
<div style="min-height: 480px;">
  @defer (on viewport) {
    <app-comments-section />
  } @placeholder {
    <div style="height: 480px;"></div>
  }
</div>

<!-- Good option 2: skeleton that matches real content layout -->
@defer (on interaction) {
  <app-data-table [rows]="rows()" />
} @placeholder {
  <app-data-table-skeleton [rowCount]="10" />
} @loading (minimum 200ms) {
  <app-data-table-skeleton [rowCount]="10" />
}

import {
  Component, ChangeDetectionStrategy, input, computed
} from '@angular/core';

// Bad: Default strategy re-renders on every event, anywhere in the app
// @Component({ changeDetection: ChangeDetectionStrategy.Default })

// Good: OnPush limits re-renders to input changes and explicit triggers
@Component({
  selector: 'app-product-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ul>
      @for (item of visibleItems(); track item.id) {
        <li>{{ item.name }}</li>
      }
    </ul>
  `,
})
export class ProductListComponent {
  // Signals integrate naturally with OnPush --
  // the view updates only when signal values change
  products = input.required<Product[]>();
  filter = input('');

  visibleItems = computed(() =>
    this.products().filter(p =>
      p.name.toLowerCase().includes(this.filter().toLowerCase())
    )
  );
}

interface Product { id: number; name: string; }