Feature/remove loading indicator of unit in overview of home page (#2622)

* Remove loading indicator of unit

* Update changelog

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

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();
       });
 

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

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">

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,