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

* Introduce isLoading attribute * Update changelog
2 days ago · 0530e098fb
24 changed files with 214 additions and 157 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
+++ b/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();
        }
      );
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/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
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
+++ b/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();
      });
  }
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/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
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/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"
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts
+++ b/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();
        }
      );
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/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"
              >
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/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]="
-            isLoading()
-              ? undefined
-              : performance().netPerformanceWithCurrencyEffect
-          "
+          [value]="performance()?.netPerformanceWithCurrencyEffect"
        />
      </div>
      <div class="col">
        <gf-value
          [colorizeSign]="true"
+          [isLoading]="isLoading()"
          [isPercent]="true"
          [locale]="locale()"
-          [value]="
-            isLoading()
-              ? undefined
-              : performance().netPerformancePercentageWithCurrencyEffect
-          "
+          [value]="performance()?.netPerformancePercentageWithCurrencyEffect"
        />
      </div>
    </div>
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/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]="
-          isLoading
-            ? undefined
-            : summary?.totalInvestmentValueWithCurrencyEffect
-        "
+        [value]="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]="
-          isLoading ? undefined : summary?.grossPerformanceWithCurrencyEffect
-        "
+        [value]="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]="
-          isLoading ? undefined : summary?.netPerformanceWithCurrencyEffect
-        "
+        [value]="summary?.netPerformanceWithCurrencyEffect"
      />
    </div>
  </div>
@ -136,13 +138,10 @@
        class="justify-content-end"
        position="end"
        [colorizeSign]="true"
+        [isLoading]="isLoading"
        [isPercent]="true"
        [locale]="locale"
-        [value]="
-          isLoading
-            ? undefined
-            : summary?.netPerformancePercentageWithCurrencyEffect
-        "
+        [value]="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]="
-          isLoading
-            ? undefined
-            : summary?.annualizedPerformancePercentWithCurrencyEffect
-        "
+        [value]="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>
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts
+++ b/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();
        }
      });
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.html
+++ b/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>
--- a/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
+++ b/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]="
-              isLoading ? undefined : user.subscription ? 'Premium' : 'Basic'
-            "
+            [value]="user?.subscription ? 'Premium' : 'Basic'"
            >Membership</gf-value
          >
        </div>
@ -86,12 +92,9 @@
          <gf-value
            i18n
            size="medium"
+            [isLoading]="isLoading"
            [value]="
-              isLoading
-                ? undefined
-                : user.country
-                  ? getCountryName({ code: user.country })
-                  : '-'
+              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>
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/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]="
-              isLoading
-                ? undefined
-                : portfolioDetails?.summary?.filteredValueInPercentage
-            "
+            [value]="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
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/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]="
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.currentValueInBaseCurrency
-            "
+            [value]="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]="
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.netPerformanceWithCurrencyEffect
-            "
+            [value]="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]="
-              isLoadingInvestmentChart
-                ? undefined
-                : performance?.netPerformancePercentageWithCurrencyEffect
-            "
+            [value]="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]="
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformance
-                "
+                [value]="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]="
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformancePercentage
-                "
+                [value]="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
-                    ? undefined
-                    : performance?.netPerformance === null
+                  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
-                    ? undefined
-                    : performance?.netPerformancePercentage === null
+                  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]="
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformanceWithCurrencyEffect
-                "
+                [value]="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
-                    ? undefined
-                    : performance?.netPerformancePercentageWithCurrencyEffect
+                  performance?.netPerformancePercentageWithCurrencyEffect
                "
              />
            </div>
--- a/apps/client/src/app/pages/public/public-page.component.ts
+++ b/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();
      });
  }
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/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 ??
-              undefined
+              publicPortfolioDetails?.performance?.['1d']?.relativeChange
            "
            >Today</gf-value
          >
@ -33,11 +33,11 @@
            i18n
            size="large"
            [colorizeSign]="true"
+            [isLoading]="isLoading"
            [isPercent]="true"
            [precision]="2"
            [value]="
-              publicPortfolioDetails?.performance?.['ytd']?.relativeChange ??
-              undefined
+              publicPortfolioDetails?.performance?.['ytd']?.relativeChange
            "
            >This year</gf-value
          >
@ -51,11 +51,11 @@
            i18n
            size="large"
            [colorizeSign]="true"
+            [isLoading]="isLoading"
            [isPercent]="true"
            [precision]="2"
            [value]="
-              publicPortfolioDetails?.performance?.['max']?.relativeChange ??
-              undefined
+              publicPortfolioDetails?.performance?.['max']?.relativeChange
            "
            >From the beginning</gf-value
          >
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/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>
--- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts
+++ b/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();
      });
  }
--- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html
+++ b/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"
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/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]="
-              isLoading() ? undefined : element.netPerformanceWithCurrencyEffect
-            "
+            [value]="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]="
-              isLoading()
-                ? undefined
-                : element.netPerformancePercentWithCurrencyEffect
-            "
+            [value]="element.netPerformancePercentWithCurrencyEffect"
          />
        </div>
      </td>
--- a/libs/ui/src/lib/value/value.component.html
+++ b/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>
--- a/libs/ui/src/lib/value/value.component.stories.ts
+++ b/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
  }
 };

--- a/libs/ui/src/lib/value/value.component.ts
+++ b/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>(() => {