Optimize changes detection

modules/ui/src/app/components/list-item/list-item.component.html

@@ -30,7 +30,7 @@
   <button
     class="list-item-menu-item"
     mat-menu-item
-    *ngFor="let action of actions()"
+    *ngFor="let action of actions(); trackBy: trackByAction"
     (click)="menuItemClicked.emit(action.action)">
     <mat-icon *ngIf="action.icon" fontSet="material-symbols-outlined">{{
       action.icon

modules/ui/src/app/components/list-item/list-item.component.ts

@@ -21,6 +21,7 @@ import {
   output,
   OnInit,
   ChangeDetectionStrategy,
+  NgZone,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -46,6 +47,7 @@ import { MatTooltip } from '@angular/material/tooltip';
 })
 export class ListItemComponent<T extends object> implements OnInit {
   private container?: HTMLElement;
+  private zone = inject(NgZone);
   entity = input.required<T>();
   actions = input<EntityAction[]>([]);
   menuItemClicked = output<string>();
@@ -63,25 +65,29 @@ export class ListItemComponent<T extends object> implements OnInit {
 
   @HostListener('mouseenter', ['$event'])
   onEvent(event: MouseEvent): void {
-    this.updateMessage();
-    if (!this.tooltip.message) return;
-    this.tooltip.show(0, { x: event.clientX, y: event.clientY });
-    this.container = document.querySelector(
-      '.mat-mdc-tooltip-panel:has(.list-item-tooltip)'
-    ) as HTMLElement;
+    this.zone.run(() => {
+      this.updateMessage();
+      if (!this.tooltip.message) return;
+      this.tooltip.show(0, { x: event.clientX, y: event.clientY });
+      this.container = document.querySelector(
+        '.mat-mdc-tooltip-panel:has(.list-item-tooltip)'
+      ) as HTMLElement;
+    });
   }
 
   @HostListener('mousemove', ['$event'])
   onMoveEvent(event: MouseEvent): void {
-    if (!this.tooltip.message) return;
-    if (!this.container) {
-      this.container = document.querySelector(
-        '.mat-mdc-tooltip-panel:has(.list-item-tooltip)'
-      ) as HTMLElement;
-    }
+    this.zone.run(() => {
+      if (!this.tooltip.message) return;
+      if (!this.container) {
+        this.container = document.querySelector(
+          '.mat-mdc-tooltip-panel:has(.list-item-tooltip)'
+        ) as HTMLElement;
+      }
 
-    this.container.style.top = event.clientY + 'px';
-    this.container.style.left = event.clientX + 'px';
+      this.container.style.top = event.clientY + 'px';
+      this.container.style.left = event.clientX + 'px';
+    });
   }
 
   @HostListener('mouseleave')
@@ -95,6 +101,10 @@ export class ListItemComponent<T extends object> implements OnInit {
     this.tooltip.tooltipClass = 'list-item-tooltip';
   }
 
+  trackByAction(index: number, item: EntityAction) {
+    return item.action;
+  }
+
   private updateMessage() {
     const tooltipMessageFn = this.tooltipMessage();
     if (tooltipMessageFn) {

modules/ui/src/app/components/list-layout/list-layout.component.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import {
+  ChangeDetectionStrategy,
   Component,
   computed,
   inject,
@@ -46,6 +47,7 @@ import { Profile } from '../../model/profile';
   providers: [DatePipe],
   templateUrl: './list-layout.component.html',
   styleUrl: './list-layout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListLayoutComponent<T extends object> {
   private datePipe = inject(DatePipe);