From 8abb517ac6137c6eaa99d1fdb16f0fd8b47f3626 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 8 Nov 2023 19:37:45 +0100
Subject: [PATCH] Feature/remove loading indicator of unit in overview of home
 page (#2622)

* Remove loading indicator of unit

* Update changelog
---
 CHANGELOG.md                                         |  1 +
 .../home-overview/home-overview.component.ts         |  5 +++++
 .../app/components/home-overview/home-overview.html  |  2 +-
 .../portfolio-performance.component.html             | 12 +-----------
 .../portfolio-performance.component.ts               |  8 +-------
 5 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6e55c6c4..bf57e6872 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Removed the loading indicator of the unit on the overview tab of the home page
 - Improved the import of historical market data in the admin control panel
 - Increased the timeout in the health check endpoint for data enhancers
 - Increased the timeout in the health check endpoint for data providers
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 2e3f1269f..92d80152f 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
@@ -33,6 +33,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
   public showDetails = false;
+  public unit: string;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -69,6 +70,10 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
 
+        this.unit = this.hasImpersonationId
+          ? '%'
+          : this.user?.settings?.baseCurrency;
+
         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 c11734155..4cec06b89 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -86,7 +86,6 @@
       <div class="col">
         <gf-portfolio-performance
           class="pb-4"
-          [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [errors]="errors"
           [isAllTimeHigh]="isAllTimeHigh"
@@ -95,6 +94,7 @@
           [locale]="user?.settings?.locale"
           [performance]="performance"
           [showDetails]="showDetails"
+          [unit]="unit"
         ></gf-portfolio-performance>
         <div *ngIf="showDetails" class="text-center">
           <gf-toggle
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
index 025259c23..34fb95dae 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
@@ -35,17 +35,7 @@
       <span #value id="value"></span>
     </div>
     <div class="flex-grow-1 px-1">
-      <ngx-skeleton-loader
-        *ngIf="isLoading"
-        animation="pulse"
-        [theme]="{
-          height: '1.3rem',
-          width: '2.5rem'
-        }"
-      ></ngx-skeleton-loader>
-      <div *ngIf="!isLoading">
-        {{ unit }}
-      </div>
+      {{ unit }}
     </div>
   </div>
   <div *ngIf="showDetails" class="row">
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
index 586d16ebf..29ccf3b71 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
@@ -25,7 +25,6 @@ import { isNumber } from 'lodash';
   styleUrls: ['./portfolio-performance.component.scss']
 })
 export class PortfolioPerformanceComponent implements OnChanges, OnInit {
-  @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() errors: ResponseError['errors'];
   @Input() isAllTimeHigh: boolean;
@@ -34,11 +33,10 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
   @Input() locale: string;
   @Input() performance: PortfolioPerformance;
   @Input() showDetails: boolean;
+  @Input() unit: string;
 
   @ViewChild('value') value: ElementRef;
 
-  public unit: string;
-
   public constructor() {}
 
   public ngOnInit() {}
@@ -50,8 +48,6 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
       }
     } else {
       if (isNumber(this.performance?.currentValue)) {
-        this.unit = this.baseCurrency;
-
         new CountUp('value', this.performance?.currentValue, {
           decimal: getNumberFormatDecimal(this.locale),
           decimalPlaces:
@@ -63,8 +59,6 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
           separator: getNumberFormatGroup(this.locale)
         }).start();
       } else if (this.performance?.currentValue === null) {
-        this.unit = '%';
-
         new CountUp(
           'value',
           this.performance?.currentNetPerformancePercent * 100,