Introduce isLoading attribute

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -102,6 +102,7 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected holdings: PortfolioPosition[];
   protected interestInBaseCurrency: number;
   protected interestInBaseCurrencyPrecision = 2;
+  protected isLoading = true;
   protected isLoadingChart: boolean;
   protected name: string | null;
   protected pageIndex = 0;
@@ -302,6 +303,8 @@ export class GfAccountDetailDialogComponent implements OnInit {
 
           this.valueInBaseCurrency = valueInBaseCurrency;
 
+          this.isLoading = false;
+
           this.changeDetectorRef.markForCheck();
         }
       );

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -12,6 +12,7 @@
         <gf-value
           size="large"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="user?.settings?.locale"
           [unit]="user?.settings?.baseCurrency"
           [value]="valueInBaseCurrency"
@@ -48,6 +49,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [precision]="balancePrecision"
                 [unit]="currency"
@@ -60,6 +62,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [precision]="equityPrecision"
                 [unit]="currency"
@@ -72,6 +75,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [precision]="interestInBaseCurrencyPrecision"
                 [unit]="user?.settings?.baseCurrency"
@@ -84,6 +88,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [precision]="dividendInBaseCurrencyPrecision"
                 [unit]="user?.settings?.baseCurrency"
@@ -94,6 +99,7 @@
             <div class="col-6 mb-3">
               <gf-value
                 size="medium"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [value]="activitiesCount"
               >
@@ -108,6 +114,7 @@
               <gf-value
                 i18n
                 size="medium"
+                [isLoading]="isLoading"
                 [locale]="user?.settings?.locale"
                 [value]="platformName"
                 >Platform</gf-value

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -283,6 +283,7 @@ export class GfAssetProfileDialogComponent implements OnInit {
   protected isBenchmark = false;
   protected isDataGatheringEnabled: boolean;
   protected isEditAssetProfileIdentifierMode = false;
+  protected isLoading = true;
   protected readonly isUUID = isUUID;
   protected marketDataItems: MarketData[] = [];
 
@@ -496,6 +497,8 @@ export class GfAssetProfileDialogComponent implements OnInit {
 
         this.assetProfileForm.markAsPristine();
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -183,6 +183,7 @@
                   i18n
                   size="medium"
                   [enableCopyToClipboardButton]="true"
+                  [isLoading]="isLoading"
                   [value]="assetProfile?.symbol"
                   >Symbol</gf-value
                 >
@@ -191,6 +192,7 @@
                 <gf-value
                   i18n
                   size="medium"
+                  [isLoading]="isLoading"
                   [value]="
                     assetProfile?.dataProviderInfo?.name ??
                     assetProfile?.dataSource
@@ -213,7 +215,11 @@
               </div>
             }
             <div class="col-6 mb-3">
-              <gf-value i18n size="medium" [value]="assetProfile?.currency"
+              <gf-value
+                i18n
+                size="medium"
+                [isLoading]="isLoading"
+                [value]="assetProfile?.currency"
                 >Currency</gf-value
               >
             </div>
@@ -231,6 +237,7 @@
                 i18n
                 size="medium"
                 [isDate]="assetProfile?.dateOfFirstActivity ? true : false"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [value]="assetProfile?.dateOfFirstActivity ?? '-'"
                 >First Activity</gf-value
@@ -240,6 +247,7 @@
               <gf-value
                 i18n
                 size="medium"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [value]="assetProfile?.activitiesCount"
                 >Activities</gf-value

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -7,6 +7,7 @@
             i18n
             size="large"
             [enableCopyToClipboardButton]="true"
+            [isLoading]="isLoading"
             [value]="version"
             >Version</gf-value
           >
@@ -19,6 +20,7 @@
           <gf-value
             i18n
             size="large"
+            [isLoading]="isLoading"
             [locale]="user?.settings?.locale"
             [value]="userCount"
             >Users</gf-value
@@ -32,6 +34,7 @@
           <gf-value
             i18n
             size="large"
+            [isLoading]="isLoading"
             [locale]="user?.settings?.locale"
             [subLabel]="activitiesCountPerUser"
             [value]="activitiesCount"

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -157,6 +157,7 @@ export class GfHoldingDetailDialogComponent implements OnInit {
   }>;
   protected investmentInBaseCurrencyWithCurrencyEffect: number;
   protected investmentInBaseCurrencyWithCurrencyEffectPrecision = 2;
+  protected isLoading = true;
   protected readonly isUUID = isUUID;
   protected marketDataItems: MarketData[] = [];
   protected marketPrice: number;
@@ -571,6 +572,8 @@ export class GfHoldingDetailDialogComponent implements OnInit {
             this.fetchMarketData();
           }
 
+          this.isLoading = false;
+
           this.changeDetectorRef.markForCheck();
         }
       );

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -12,6 +12,7 @@
         <gf-value
           size="large"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="data.locale"
           [unit]="data.baseCurrency"
           [value]="value"
@@ -55,6 +56,7 @@
                 size="medium"
                 [colorizeSign]="true"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="netPerformanceWithCurrencyEffectPrecision"
                 [unit]="data.baseCurrency"
@@ -75,6 +77,7 @@
                 i18n
                 size="medium"
                 [colorizeSign]="true"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [locale]="data.locale"
                 [precision]="netPerformancePercentWithCurrencyEffectPrecision"
@@ -95,6 +98,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="averagePricePrecision"
                 [unit]="assetProfile?.currency"
@@ -107,6 +111,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="marketPricePrecision"
                 [unit]="assetProfile?.currency"
@@ -125,6 +130,7 @@
                     round(marketPriceMin, marketPriceMinPrecision)
                 "
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="marketPriceMinPrecision"
                 [unit]="assetProfile?.currency"
@@ -143,6 +149,7 @@
                     round(marketPriceMin, marketPriceMinPrecision)
                 "
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="marketPriceMaxPrecision"
                 [unit]="assetProfile?.currency"
@@ -154,6 +161,7 @@
               <gf-value
                 i18n
                 size="medium"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="quantityPrecision"
                 [value]="quantity"
@@ -165,6 +173,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [precision]="
                   investmentInBaseCurrencyWithCurrencyEffectPrecision
@@ -182,6 +191,7 @@
                   i18n
                   size="medium"
                   [isCurrency]="true"
+                  [isLoading]="isLoading"
                   [locale]="data.locale"
                   [precision]="dividendInBaseCurrencyPrecision"
                   [unit]="data.baseCurrency"
@@ -193,6 +203,7 @@
                 <gf-value
                   i18n
                   size="medium"
+                  [isLoading]="isLoading"
                   [isPercent]="true"
                   [locale]="data.locale"
                   [value]="dividendYieldPercentWithCurrencyEffect"
@@ -205,6 +216,7 @@
                 i18n
                 size="medium"
                 [isCurrency]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [unit]="data.baseCurrency"
                 [value]="feeInBaseCurrency"
@@ -217,6 +229,7 @@
                 size="medium"
                 [deviceType]="data.deviceType"
                 [isDate]="true"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [value]="dateOfFirstActivity"
                 >First Activity</gf-value
@@ -225,6 +238,7 @@
             <div class="col-6 mb-3">
               <gf-value
                 size="medium"
+                [isLoading]="isLoading"
                 [locale]="data.locale"
                 [value]="activitiesCount"
               >

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -2,7 +2,11 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
     <div class="justify-content-end">
-      <gf-value class="justify-content-end" [value]="timeInMarket" />
+      <gf-value
+        class="justify-content-end"
+        [isLoading]="isLoading"
+        [value]="timeInMarket"
+      />
     </div>
   </div>
   <div

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -87,6 +87,7 @@ export class GfUserAccountSettingsComponent implements OnInit {
   protected hasPermissionToUpdateUserSettings: boolean;
   protected isAccessTokenHidden = true;
   protected readonly isFingerprintSupported = this.doesBrowserSupportAuthn();
+  protected isLoading = true;
   protected isWebAuthnEnabled: boolean;
   protected readonly language = document.documentElement.lang;
   protected locales = [
@@ -178,6 +179,8 @@ export class GfUserAccountSettingsComponent implements OnInit {
 
           this.locales = Array.from(new Set(this.locales)).sort();
 
+          this.isLoading = false;
+
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -273,6 +273,7 @@
           <gf-value
             class="text-monospace"
             [enableCopyToClipboardButton]="true"
+            [isLoading]="isLoading"
             [value]="user?.id"
           />
         </div>

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -210,6 +210,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.developedMarkets?.valueInPercentage"
                 >Developed Markets</gf-value
@@ -219,6 +220,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.emergingMarkets?.valueInPercentage"
                 >Emerging Markets</gf-value
@@ -228,6 +230,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.otherMarkets?.valueInPercentage"
                 >Other Markets</gf-value
@@ -238,6 +241,7 @@
                 <gf-value
                   i18n
                   size="large"
+                  [isLoading]="isLoading"
                   [isPercent]="true"
                   [value]="markets?.[UNKNOWN_KEY]?.valueInPercentage"
                   >No data available</gf-value

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -46,6 +46,7 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
 export class GfBenchmarkDetailDialogComponent implements OnInit {
   public assetProfile: AdminMarketDataDetails['assetProfile'];
   public historicalDataItems: LineChartItem[];
+  public isLoading = true;
   public value: number;
 
   public constructor(
@@ -79,6 +80,8 @@ export class GfBenchmarkDetailDialogComponent implements OnInit {
           }
         );
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -11,6 +11,7 @@
       <div class="col-12 d-flex justify-content-center mb-3">
         <gf-value
           size="large"
+          [isLoading]="isLoading"
           [locale]="data.locale"
           [precision]="2"
           [value]="value"