Introduce isLoading attribute

4 weeks ago · a50caeb01d
7 changed files with 121 additions and 134 deletions
--- 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
@ -33,10 +33,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 +47,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 +64,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 +78,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 +95,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 +112,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 +134,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 +151,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 +184,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 +197,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 +213,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 +228,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 +262,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 +275,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 +291,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 +306,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 +325,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 +359,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 +376,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 +393,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 +413,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 +449,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 +463,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 +477,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-detail-dialog/user-detail-dialog.html
+++ b/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
@ -36,12 +36,13 @@
          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 +54,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 +64,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 +78,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 +88,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 +103,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 +113,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 +127,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 +138,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>
--- 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,15 +201,14 @@
                class="justify-content-end"
                position="end"
                [isCurrency]="true"
+                [isLoading]="isLoadingInvestmentChart"
                [locale]="user?.settings?.locale"
                [unit]="user?.settings?.baseCurrency"
                [value]="
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformance === null
-                      ? null
-                      : performance?.netPerformanceWithCurrencyEffect -
-                        performance?.netPerformance
+                  performance?.netPerformance === null
+                    ? null
+                    : performance?.netPerformanceWithCurrencyEffect -
+                      performance?.netPerformance
                "
              />
            </div>
@ -238,15 +222,14 @@
                class="justify-content-end"
                position="end"
                [colorizeSign]="true"
+                [isLoading]="isLoadingInvestmentChart"
                [isPercent]="true"
                [locale]="user?.settings?.locale"
                [value]="
-                  isLoadingInvestmentChart
-                    ? undefined
-                    : performance?.netPerformancePercentage === null
-                      ? null
-                      : performance?.netPerformancePercentageWithCurrencyEffect -
-                        performance?.netPerformancePercentage
+                  performance?.netPerformancePercentage === null
+                    ? null
+                    : performance?.netPerformancePercentageWithCurrencyEffect -
+                      performance?.netPerformancePercentage
                "
              />
            </div>
@ -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/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/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>