From bf8704188164f9912744166bc8f0bf13f4fb25b6 Mon Sep 17 00:00:00 2001
From: Brad <44413459+lastbestdev@users.noreply.github.com>
Date: Wed, 28 Jan 2026 14:20:17 -0800
Subject: [PATCH] [PM-31354] Fix Reports page loading (#18631)

* fix reports page loading

* update to signals, leave OnPush detection strategy
---
 .../dirt/reports/pages/reports-home.component.html    |  2 +-
 .../app/dirt/reports/pages/reports-home.component.ts  |  8 ++++----
 .../shared/report-list/report-list.component.html     |  2 +-
 .../shared/report-list/report-list.component.ts       | 11 +++--------
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/dirt/reports/pages/reports-home.component.html b/apps/web/src/app/dirt/reports/pages/reports-home.component.html
index 9101933bc40..ee3caae4212 100644
--- a/apps/web/src/app/dirt/reports/pages/reports-home.component.html
+++ b/apps/web/src/app/dirt/reports/pages/reports-home.component.html
@@ -3,5 +3,5 @@
 <bit-container>
   <p>{{ "reportsDesc" | i18n }}</p>
 
-  <app-report-list [reports]="reports"></app-report-list>
+  <app-report-list [reports]="reports()"></app-report-list>
 </bit-container>
diff --git a/apps/web/src/app/dirt/reports/pages/reports-home.component.ts b/apps/web/src/app/dirt/reports/pages/reports-home.component.ts
index 25cf663ba7e..5dd7f1d3ec0 100644
--- a/apps/web/src/app/dirt/reports/pages/reports-home.component.ts
+++ b/apps/web/src/app/dirt/reports/pages/reports-home.component.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, OnInit, signal } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -16,7 +16,7 @@ import { ReportEntry, ReportVariant } from "../shared";
   standalone: false,
 })
 export class ReportsHomeComponent implements OnInit {
-  reports: ReportEntry[];
+  readonly reports = signal<ReportEntry[]>([]);
 
   constructor(
     private billingAccountProfileStateService: BillingAccountProfileStateService,
@@ -32,7 +32,7 @@ export class ReportsHomeComponent implements OnInit {
       ? ReportVariant.Enabled
       : ReportVariant.RequiresPremium;
 
-    this.reports = [
+    this.reports.set([
       {
         ...reports[ReportType.ExposedPasswords],
         variant: reportRequiresPremium,
@@ -57,6 +57,6 @@ export class ReportsHomeComponent implements OnInit {
         ...reports[ReportType.DataBreach],
         variant: ReportVariant.Enabled,
       },
-    ];
+    ]);
   }
 }
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
index bba57882027..4726eb5c42f 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.html
@@ -1,7 +1,7 @@
 <div
   class="tw-inline-grid tw-place-items-stretch tw-place-content-center tw-grid-cols-1 @xl:tw-grid-cols-2 @4xl:tw-grid-cols-3 tw-gap-4 [&_a]:tw-max-w-none @5xl:[&_a]:tw-max-w-72"
 >
-  @for (report of reports; track report) {
+  @for (report of reports(); track report) {
     <div>
       <app-report-card
         [title]="report.title | i18n"
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.ts
index 509e2f3b872..095484de0ce 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.component.ts
@@ -1,18 +1,13 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 
 import { ReportEntry } from "../models/report-entry";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "app-report-list",
   templateUrl: "report-list.component.html",
   standalone: false,
 })
 export class ReportListComponent {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() reports: ReportEntry[];
+  readonly reports = input<ReportEntry[]>([]);
 }