From 00261d2eddf2d668f15ccded14b642a3c7549827 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sat, 23 May 2026 16:19:02 +0700
Subject: [PATCH] feat(client): convert historicalDataItems and
 isLoadingPerformance to signals

---
 .../home-overview/home-overview.component.ts      | 15 ++++++++-------
 .../components/home-overview/home-overview.html   |  6 +++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts
index 86092052c..ad073f585 100644
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@@ -46,8 +46,8 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 export class GfHomeOverviewComponent implements OnInit {
   protected readonly errors = signal<AssetProfileIdentifier[]>([]);
   protected readonly hasImpersonationId = signal(false);
-  protected historicalDataItems: LineChartItem[] | null;
-  protected isLoadingPerformance = true;
+  protected readonly historicalDataItems = signal<LineChartItem[] | null>(null);
+  protected readonly isLoadingPerformance = signal(true);
   protected performance: PortfolioPerformance;
   protected readonly performanceLabel = $localize`Performance`;
   protected precision = 2;
@@ -116,8 +116,8 @@ export class GfHomeOverviewComponent implements OnInit {
   }
 
   private update() {
-    this.historicalDataItems = null;
-    this.isLoadingPerformance = true;
+    this.historicalDataItems.set(null);
+    this.isLoadingPerformance.set(true);
 
     this.dataService
       .fetchPortfolioPerformance({
@@ -128,7 +128,7 @@ export class GfHomeOverviewComponent implements OnInit {
         this.errors.set(errors ?? []);
         this.performance = performance;
 
-        this.historicalDataItems =
+        this.historicalDataItems.set(
           chart?.map(
             ({ date, netPerformanceInPercentageWithCurrencyEffect }) => {
               return {
@@ -136,7 +136,8 @@ export class GfHomeOverviewComponent implements OnInit {
                 value: (netPerformanceInPercentageWithCurrencyEffect ?? 0) * 100
               };
             }
-          ) ?? null;
+          ) ?? null
+        );
 
         if (
           this.deviceType() === 'mobile' &&
@@ -146,7 +147,7 @@ export class GfHomeOverviewComponent implements OnInit {
           this.precision = 0;
         }
 
-        this.isLoadingPerformance = false;
+        this.isLoadingPerformance.set(false);
 
         this.changeDetectorRef.markForCheck();
       });
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index 906fb7efb..72f46cadb 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -69,8 +69,8 @@
             unit="%"
             [class.pr-3]="deviceType() === 'mobile'"
             [colorScheme]="user()?.settings?.colorScheme"
-            [hidden]="historicalDataItems?.length === 0"
-            [historicalDataItems]="historicalDataItems"
+            [hidden]="historicalDataItems()?.length === 0"
+            [historicalDataItems]="historicalDataItems()"
             [isAnimated]="user()?.settings?.dateRange === '1d' ? false : true"
             [label]="performanceLabel"
             [locale]="user()?.settings?.locale"
@@ -88,7 +88,7 @@
           class="pb-4"
           [deviceType]="deviceType()"
           [errors]="errors()"
-          [isLoading]="isLoadingPerformance"
+          [isLoading]="isLoadingPerformance()"
           [locale]="user()?.settings?.locale"
           [performance]="performance"
           [precision]="precision"