Task/extend value component by isLoading attribute (#7540)

* Introduce isLoading attribute

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the platform logo to the platform selector in the create or update account dialog
 - Added the platform logo to the account selector in the create or update activity dialog
+- Extended the value component by an `isLoading` attribute to distinguish the loading state from redacted values
 
 ### Changed
 

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-performance/portfolio-performance.component.html

@@ -38,24 +38,18 @@
         <gf-value
           [colorizeSign]="true"
           [isCurrency]="true"
+          [isLoading]="isLoading()"
           [locale]="locale()"
-          [value]="
+          [value]="performance()?.netPerformanceWithCurrencyEffect"
-            isLoading()
-              ? undefined
-              : performance().netPerformanceWithCurrencyEffect
-          "
         />
       </div>
       <div class="col">
         <gf-value
           [colorizeSign]="true"
+          [isLoading]="isLoading()"
           [isPercent]="true"
           [locale]="locale()"
-          [value]="
+          [value]="performance()?.netPerformancePercentageWithCurrencyEffect"
-            isLoading()
-              ? undefined
-              : performance().netPerformancePercentageWithCurrencyEffect
-          "
         />
       </div>
     </div>

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
@@ -33,10 +37,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.totalBuy"
+        [value]="summary?.totalBuy"
       />
     </div>
   </div>
@@ -46,10 +51,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.totalSell"
+        [value]="summary?.totalSell"
       />
     </div>
   </div>
@@ -62,14 +68,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="
+        [value]="summary?.totalInvestmentValueWithCurrencyEffect"
-          isLoading
-            ? undefined
-            : summary?.totalInvestmentValueWithCurrencyEffect
-        "
       />
     </div>
   </div>
@@ -79,12 +82,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="
+        [value]="summary?.grossPerformanceWithCurrencyEffect"
-          isLoading ? undefined : summary?.grossPerformanceWithCurrencyEffect
-        "
       />
     </div>
   </div>
@@ -97,10 +99,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.fees"
+        [value]="summary?.fees"
       />
     </div>
   </div>
@@ -113,12 +116,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="
+        [value]="summary?.netPerformanceWithCurrencyEffect"
-          isLoading ? undefined : summary?.netPerformanceWithCurrencyEffect
-        "
       />
     </div>
   </div>
@@ -136,13 +138,10 @@
         class="justify-content-end"
         position="end"
         [colorizeSign]="true"
+        [isLoading]="isLoading"
         [isPercent]="true"
         [locale]="locale"
-        [value]="
+        [value]="summary?.netPerformancePercentageWithCurrencyEffect"
-          isLoading
-            ? undefined
-            : summary?.netPerformancePercentageWithCurrencyEffect
-        "
       />
     </div>
   </div>
@@ -156,10 +155,11 @@
         class="justify-content-end"
         position="end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.totalAssetsInBaseCurrency"
+        [value]="summary?.totalAssetsInBaseCurrency"
       />
     </div>
   </div>
@@ -188,10 +188,11 @@
       ) {
         <gf-value
           class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
           [precision]="0"
-          [value]="isLoading ? undefined : holdingsPercentage"
+          [value]="holdingsPercentage"
         />
       }
     </div>
@@ -200,10 +201,11 @@
         class="justify-content-end"
         position="end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : holdingsInBaseCurrency"
+        [value]="holdingsInBaseCurrency"
       />
     </div>
   </div>
@@ -215,10 +217,11 @@
           class="justify-content-end"
           position="end"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="locale"
           [precision]="precision"
           [unit]="baseCurrency"
-          [value]="isLoading ? undefined : investmentsInBaseCurrency"
+          [value]="investmentsInBaseCurrency"
         />
       </div>
     </div>
@@ -229,10 +232,11 @@
           class="justify-content-end"
           position="end"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="locale"
           [precision]="precision"
           [unit]="baseCurrency"
-          [value]="isLoading ? undefined : summary?.emergencyFund?.assets"
+          [value]="summary?.emergencyFund?.assets"
         />
       </div>
     </div>
@@ -262,10 +266,11 @@
       ) {
         <gf-value
           class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
           [precision]="0"
-          [value]="isLoading ? undefined : cashPercentage"
+          [value]="cashPercentage"
         />
       }
     </div>
@@ -274,10 +279,11 @@
         class="justify-content-end"
         position="end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.totalCashInBaseCurrency"
+        [value]="summary?.totalCashInBaseCurrency"
       />
     </div>
   </div>
@@ -289,10 +295,11 @@
           class="justify-content-end"
           position="end"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="locale"
           [precision]="precision"
           [unit]="baseCurrency"
-          [value]="isLoading ? undefined : summary?.cash"
+          [value]="summary?.cash"
         />
       </div>
     </div>
@@ -303,10 +310,11 @@
           class="justify-content-end"
           position="end"
           [isCurrency]="true"
+          [isLoading]="isLoading"
           [locale]="locale"
           [precision]="precision"
           [unit]="baseCurrency"
-          [value]="isLoading ? undefined : summary?.emergencyFund?.cash"
+          [value]="summary?.emergencyFund?.cash"
         />
       </div>
     </div>
@@ -321,20 +329,22 @@
       ) {
         <gf-value
           class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
           [precision]="0"
-          [value]="isLoading ? undefined : excludedFromAnalysisPercentage"
+          [value]="excludedFromAnalysisPercentage"
         />
       }
     </div>
     <div class="align-items-center d-flex justify-content-end">
       <gf-value
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
+        [value]="summary?.excludedAccountsAndActivities"
       />
     </div>
   </div>
@@ -353,10 +363,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.liabilitiesInBaseCurrency"
+        [value]="summary?.liabilitiesInBaseCurrency"
       />
     </div>
   </div>
@@ -369,10 +380,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.totalValueInBaseCurrency"
+        [value]="summary?.totalValueInBaseCurrency"
       />
     </div>
   </div>
@@ -385,13 +397,10 @@
         class="justify-content-end"
         position="end"
         [colorizeSign]="true"
+        [isLoading]="isLoading"
         [isPercent]="true"
         [locale]="locale"
-        [value]="
+        [value]="summary?.annualizedPerformancePercentWithCurrencyEffect"
-          isLoading
-            ? undefined
-            : summary?.annualizedPerformancePercentWithCurrencyEffect
-        "
       />
     </div>
   </div>
@@ -408,10 +417,11 @@
       ) {
         <gf-value
           class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
           [precision]="0"
-          [value]="isLoading ? undefined : emergencyFundPercentage"
+          [value]="emergencyFundPercentage"
         />
       }
     </div>
@@ -443,10 +453,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.emergencyFund?.total"
+        [value]="summary?.emergencyFund?.total"
       />
     </div>
   </div>
@@ -456,10 +467,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.interestInBaseCurrency"
+        [value]="summary?.interestInBaseCurrency"
       />
     </div>
   </div>
@@ -469,10 +481,11 @@
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
+        [isLoading]="isLoading"
         [locale]="locale"
         [precision]="precision"
         [unit]="baseCurrency"
-        [value]="isLoading ? undefined : summary?.dividendInBaseCurrency"
+        [value]="summary?.dividendInBaseCurrency"
       />
     </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/components/user-detail-dialog/user-detail-dialog.html

@@ -36,12 +36,17 @@
           i18n
           size="medium"
           [enableCopyToClipboardButton]="true"
-          [value]="isLoading ? undefined : user.id"
+          [isLoading]="isLoading"
+          [value]="user?.id"
           >User ID</gf-value
         >
       </div>
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="isLoading ? undefined : user.role"
+        <gf-value
+          i18n
+          size="medium"
+          [isLoading]="isLoading"
+          [value]="user?.role"
           >Role</gf-value
         >
       </div>
@@ -53,8 +58,9 @@
           i18n
           size="medium"
           [isDate]="true"
+          [isLoading]="isLoading"
           [locale]="data.locale"
-          [value]="isLoading ? undefined : user.createdAt"
+          [value]="user?.createdAt"
           >Registration Date</gf-value
         >
       </div>
@@ -62,8 +68,9 @@
         <gf-value
           i18n
           size="medium"
+          [isLoading]="isLoading"
           [locale]="data.locale"
-          [value]="isLoading ? undefined : user.provider"
+          [value]="user?.provider"
           >Authentication</gf-value
         >
       </div>
@@ -75,10 +82,9 @@
           <gf-value
             i18n
             size="medium"
+            [isLoading]="isLoading"
             [locale]="data.locale"
-            [value]="
+            [value]="user?.subscription ? 'Premium' : 'Basic'"
-              isLoading ? undefined : user.subscription ? 'Premium' : 'Basic'
-            "
             >Membership</gf-value
           >
         </div>
@@ -86,12 +92,9 @@
           <gf-value
             i18n
             size="medium"
+            [isLoading]="isLoading"
             [value]="
-              isLoading
+              user?.country ? getCountryName({ code: user.country }) : '-'
-                ? undefined
-                : user.country
-                  ? getCountryName({ code: user.country })
-                  : '-'
             "
             >Country</gf-value
           >
@@ -104,8 +107,9 @@
         <gf-value
           i18n
           size="medium"
+          [isLoading]="isLoading"
           [locale]="data.locale"
-          [value]="isLoading ? undefined : user.accountCount"
+          [value]="user?.accountCount"
           >Accounts</gf-value
         >
       </div>
@@ -113,8 +117,9 @@
         <gf-value
           i18n
           size="medium"
+          [isLoading]="isLoading"
           [locale]="data.locale"
-          [value]="isLoading ? undefined : user.activityCount"
+          [value]="user?.activityCount"
           >Activities</gf-value
         >
       </div>
@@ -126,9 +131,10 @@
           <gf-value
             i18n
             size="medium"
+            [isLoading]="isLoading"
             [locale]="data.locale"
             [precision]="0"
-            [value]="isLoading ? undefined : user.engagement"
+            [value]="user?.engagement"
             >Engagement per Day</gf-value
           >
         </div>
@@ -136,8 +142,9 @@
           <gf-value
             i18n
             size="medium"
+            [isLoading]="isLoading"
             [locale]="data.locale"
-            [value]="isLoading ? undefined : user.dailyApiRequests"
+            [value]="user?.dailyApiRequests"
             >API Requests Today</gf-value
           >
         </div>

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

@@ -14,12 +14,9 @@
           <gf-value
             class="justify-content-end l-2"
             size="medium"
+            [isLoading]="isLoading"
             [isPercent]="true"
-            [value]="
+            [value]="portfolioDetails?.summary?.filteredValueInPercentage"
-              isLoading
-                ? undefined
-                : portfolioDetails?.summary?.filteredValueInPercentage
-            "
           />
         </mat-card-header>
         <mat-card-content>
@@ -213,6 +210,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.developedMarkets?.valueInPercentage"
                 >Developed Markets</gf-value
@@ -222,6 +220,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.emergingMarkets?.valueInPercentage"
                 >Emerging Markets</gf-value
@@ -231,6 +230,7 @@
               <gf-value
                 i18n
                 size="large"
+                [isLoading]="isLoading"
                 [isPercent]="true"
                 [value]="markets?.otherMarkets?.valueInPercentage"
                 >Other Markets</gf-value
@@ -241,6 +241,7 @@
                 <gf-value
                   i18n
                   size="large"
+                  [isLoading]="isLoading"
                   [isPercent]="true"
                   [value]="markets?.[UNKNOWN_KEY]?.valueInPercentage"
                   >No data available</gf-value

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

@@ -83,14 +83,11 @@
             i18n
             size="large"
             [isCurrency]="true"
+            [isLoading]="isLoadingInvestmentChart"
             [locale]="user?.settings?.locale"
             [precision]="precision"
             [unit]="user?.settings?.baseCurrency"
-            [value]="
+            [value]="performance?.currentValueInBaseCurrency"
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.currentValueInBaseCurrency
-            "
             >Total amount</gf-value
           >
         </mat-card-content>
@@ -104,14 +101,11 @@
             size="large"
             [colorizeSign]="true"
             [isCurrency]="true"
+            [isLoading]="isLoadingInvestmentChart"
             [locale]="user?.settings?.locale"
             [precision]="precision"
             [unit]="user?.settings?.baseCurrency"
-            [value]="
+            [value]="performance?.netPerformanceWithCurrencyEffect"
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.netPerformanceWithCurrencyEffect
-            "
             >Change with currency effect</gf-value
           >
         </mat-card-content>
@@ -124,13 +118,10 @@
             i18n
             size="large"
             [colorizeSign]="true"
+            [isLoading]="isLoadingInvestmentChart"
             [isPercent]="true"
             [locale]="user?.settings?.locale"
-            [value]="
+            [value]="performance?.netPerformancePercentageWithCurrencyEffect"
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.netPerformancePercentageWithCurrencyEffect
-            "
             >Performance with currency effect</gf-value
           >
         </mat-card-content>
@@ -173,13 +164,10 @@
                 class="justify-content-end"
                 position="end"
                 [isCurrency]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
-                [value]="
+                [value]="performance?.netPerformance"
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformance
-                "
               />
             </div>
           </div>
@@ -192,13 +180,10 @@
                 class="justify-content-end"
                 position="end"
                 [colorizeSign]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
-                [value]="
+                [value]="performance?.netPerformancePercentage"
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformancePercentage
-                "
               />
             </div>
           </div>
@@ -216,12 +201,11 @@
                 class="justify-content-end"
                 position="end"
                 [isCurrency]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
                 [value]="
-                  isLoadingInvestmentChart
+                  performance?.netPerformance === null
-                    ? undefined
-                    : performance?.netPerformance === null
                     ? null
                     : performance?.netPerformanceWithCurrencyEffect -
                       performance?.netPerformance
@@ -238,12 +222,11 @@
                 class="justify-content-end"
                 position="end"
                 [colorizeSign]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
                 [value]="
-                  isLoadingInvestmentChart
+                  performance?.netPerformancePercentage === null
-                    ? undefined
-                    : performance?.netPerformancePercentage === null
                     ? null
                     : performance?.netPerformancePercentageWithCurrencyEffect -
                       performance?.netPerformancePercentage
@@ -261,13 +244,10 @@
                 class="justify-content-end"
                 position="end"
                 [isCurrency]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
-                [value]="
+                [value]="performance?.netPerformanceWithCurrencyEffect"
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformanceWithCurrencyEffect
-                "
               />
             </div>
           </div>
@@ -280,12 +260,11 @@
                 class="justify-content-end"
                 position="end"
                 [colorizeSign]="true"
+                [isLoading]="isLoadingInvestmentChart"
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
                 [value]="
-                  isLoadingInvestmentChart
+                  performance?.netPerformancePercentageWithCurrencyEffect
-                    ? undefined
-                    : performance?.netPerformancePercentageWithCurrencyEffect
                 "
               />
             </div>

apps/client/src/app/pages/public/public-page.component.ts

@@ -69,6 +69,7 @@ export class GfPublicPageComponent implements OnInit {
   protected hasPermissionForSubscription: boolean;
   protected holdings: PublicPortfolioResponse['holdings'][string][];
   protected info: InfoItem;
+  protected isLoading = true;
   protected latestActivitiesDataSource: MatTableDataSource<
     PublicPortfolioResponse['latestActivities'][0]
   >;
@@ -138,6 +139,8 @@ export class GfPublicPageComponent implements OnInit {
           this.publicPortfolioDetails.latestActivities
         );
 
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }

apps/client/src/app/pages/public/public-page.html

@@ -15,11 +15,11 @@
             i18n
             size="large"
             [colorizeSign]="true"
+            [isLoading]="isLoading"
             [isPercent]="true"
             [precision]="2"
             [value]="
-              publicPortfolioDetails?.performance?.['1d']?.relativeChange ??
+              publicPortfolioDetails?.performance?.['1d']?.relativeChange
-              undefined
             "
             >Today</gf-value
           >
@@ -33,11 +33,11 @@
             i18n
             size="large"
             [colorizeSign]="true"
+            [isLoading]="isLoading"
             [isPercent]="true"
             [precision]="2"
             [value]="
-              publicPortfolioDetails?.performance?.['ytd']?.relativeChange ??
+              publicPortfolioDetails?.performance?.['ytd']?.relativeChange
-              undefined
             "
             >This year</gf-value
           >
@@ -51,11 +51,11 @@
             i18n
             size="large"
             [colorizeSign]="true"
+            [isLoading]="isLoading"
             [isPercent]="true"
             [precision]="2"
             [value]="
-              publicPortfolioDetails?.performance?.['max']?.relativeChange ??
+              publicPortfolioDetails?.performance?.['max']?.relativeChange
-              undefined
             "
             >From the beginning</gf-value
           >

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -210,8 +210,9 @@
           <gf-value
             [deviceType]="deviceType"
             [isDate]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.date"
+            [value]="element.date"
           />
         </div>
       </td>
@@ -234,8 +235,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.quantity"
+            [value]="element.quantity"
           />
         </div>
       </td>
@@ -258,8 +260,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.unitPrice"
+            [value]="element.unitPrice"
           />
         </div>
       </td>
@@ -282,8 +285,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.fee"
+            [value]="element.fee"
           />
         </div>
       </td>
@@ -305,8 +309,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.value"
+            [value]="element.value"
           />
         </div>
       </td>
@@ -337,8 +342,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale"
-            [value]="isLoading() ? undefined : element.valueInBaseCurrency"
+            [value]="element.valueInBaseCurrency"
           />
         </div>
       </td>

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"

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -81,8 +81,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale()"
-            [value]="isLoading() ? undefined : element.quantity"
+            [value]="element.quantity"
           />
         </div>
       </td>
@@ -105,8 +106,9 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale()"
-            [value]="isLoading() ? undefined : element.valueInBaseCurrency"
+            [value]="element.valueInBaseCurrency"
           />
         </div>
       </td>
@@ -125,9 +127,10 @@
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex justify-content-end">
           <gf-value
+            [isLoading]="isLoading()"
             [isPercent]="true"
             [locale]="locale()"
-            [value]="isLoading() ? undefined : element.allocationInPercentage"
+            [value]="element.allocationInPercentage"
           />
         </div>
       </td>
@@ -147,10 +150,9 @@
           <gf-value
             [colorizeSign]="true"
             [isCurrency]="true"
+            [isLoading]="isLoading()"
             [locale]="locale()"
-            [value]="
+            [value]="element.netPerformanceWithCurrencyEffect"
-              isLoading() ? undefined : element.netPerformanceWithCurrencyEffect
-            "
           />
         </div>
       </td>
@@ -170,13 +172,10 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [colorizeSign]="true"
+            [isLoading]="isLoading()"
             [isPercent]="true"
             [locale]="locale()"
-            [value]="
+            [value]="element.netPerformancePercentWithCurrencyEffect"
-              isLoading()
-                ? undefined
-                : element.netPerformancePercentWithCurrencyEffect
-            "
           />
         </div>
       </td>

libs/ui/src/lib/value/value.component.html

@@ -27,7 +27,20 @@
     }
   </ng-template>
 
-  @if (value || value === 0 || value === null) {
+  <!--
+    @deprecated Rendering the loading state for an undefined value is kept for
+    backward compatibility. Use the isLoading attribute instead.
+  -->
+  @if (isLoading() || value === undefined) {
+    <ngx-skeleton-loader
+      animation="pulse"
+      [theme]="{
+        height:
+          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+        width: '5rem'
+      }"
+    />
+  } @else if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
       [class.justify-content-end]="position === 'end'"
@@ -75,17 +88,6 @@
     </div>
   }
 
-  @if (value === undefined) {
-    <ngx-skeleton-loader
-      animation="pulse"
-      [theme]="{
-        height:
-          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
-        width: '5rem'
-      }"
-    />
-  }
-
   @if (size === 'large') {
     <div class="text-truncate">
       <span class="h6"><ng-container *ngTemplateOutlet="label" /></span>

libs/ui/src/lib/value/value.component.stories.ts

@@ -30,6 +30,9 @@ export default {
     enableCopyToClipboardButton: {
       control: 'boolean'
     },
+    isLoading: {
+      control: 'boolean'
+    },
     size: {
       control: 'select',
       options: ['small', 'medium', 'large']
@@ -41,7 +44,7 @@ type Story = StoryObj<GfValueComponent>;
 
 export const Loading: Story = {
   args: {
-    value: undefined
+    isLoading: true
   }
 };
 

libs/ui/src/lib/value/value.component.ts

@@ -62,6 +62,8 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   public readonly copiedTitle = $localize`The value has been copied to the clipboard`;
   public readonly copyToClipboardTitle = $localize`Copy to clipboard`;
+  public readonly isLoading = input<boolean>(false);
+  public readonly precision = input<number>();
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
@@ -74,8 +76,6 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
     });
   }
 
-  public readonly precision = input<number>();
-
   private copyToClipboardTimeout: ReturnType<typeof setTimeout>;
 
   private readonly formatOptions = computed<Intl.NumberFormatOptions>(() => {