From 3e94e7f07a4befb443b03515f09fc154241804ac Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 7 Sep 2026 20:23:31 +0200
Subject: [PATCH] Task/improve loading state of activity count in portfolio
 summary component (#7841)

* Improve loading state

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../portfolio-summary.component.html          | 59 +++++++++++--------
 .../portfolio-summary.component.ts            | 11 +++-
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4275e2d6..46214cfba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the loading state of the activity count in the portfolio summary
 - Upgraded `zod` from version `4.4.3` to `4.5.4`
 
 ## 3.68.0 - 2026-09-06
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index 674fb76eb..ea408c17d 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@@ -9,25 +9,33 @@
       />
     </div>
   </div>
-  <div
-    class="flex-nowrap px-3 py-1 row"
-    [hidden]="summary?.activityCount === null"
-  >
-    <div class="d-flex flex-grow-1 indent-1 text-truncate">
-      {{ summary?.activityCount }}
-      <ng-container i18n>{summary?.activityCount, plural,
-        =1 {activity}
-        other {activities}
-      }</ng-container>
-      <span
-        class="align-items-center d-none d-sm-flex ml-1"
-        matTooltipPosition="above"
-        [matTooltip]="buyAndSellActivitiesTooltip"
-      >
-        <ion-icon name="information-circle-outline" />
-      </span>
+  @if (isLoading) {
+    <div class="flex-nowrap px-3 py-1 row">
+      <div class="d-flex flex-grow-1 indent-1 text-truncate">
+        <ngx-skeleton-loader
+          animation="pulse"
+          [theme]="{ height: '1.5rem', width: '7.5rem' }"
+        />
+      </div>
     </div>
-  </div>
+  } @else {
+    <div class="flex-nowrap px-3 py-1 row">
+      <div class="d-flex flex-grow-1 indent-1 text-truncate">
+        {{ summary?.activityCount }}
+        <ng-container i18n>{summary?.activityCount, plural,
+          =1 {activity}
+          other {activities}
+        }</ng-container>
+        <span
+          class="align-items-center d-none d-sm-flex ml-1"
+          matTooltipPosition="above"
+          [matTooltip]="buyAndSellActivitiesTooltip"
+        >
+          <ion-icon name="information-circle-outline" />
+        </span>
+      </div>
+    </div>
+  }
   <div class="row">
     <div class="col"><hr /></div>
   </div>
@@ -127,11 +135,16 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 indent-1 text-truncate">
       <ng-container i18n>Net Performance</ng-container>
-      <abbr
-        class="d-none d-sm-inline-block initialism ml-2 text-muted"
-        title="Return on Average Investment"
-        >(ROAI)</abbr
-      >
+      @if (
+        user?.settings?.performanceCalculationType ===
+        PerformanceCalculationType.ROAI
+      ) {
+        <abbr
+          class="d-none d-sm-inline-block initialism ml-2 text-muted"
+          title="Return on Average Investment"
+          >(ROAI)</abbr
+        >
+      }
     </div>
     <div class="flex-column flex-wrap justify-content-end">
       <gf-value
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
index eac5ef9a6..ea6871318 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
@@ -1,6 +1,7 @@
 import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
 import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
+import { PerformanceCalculationType } from '@ghostfolio/common/types/performance-calculation-type.type';
 import { translate } from '@ghostfolio/ui/i18n';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -23,10 +24,16 @@ import {
   informationCircleOutline
 } from 'ionicons/icons';
 import { isNumber } from 'lodash';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [GfValueComponent, IonIcon, MatTooltipModule],
+  imports: [
+    GfValueComponent,
+    IonIcon,
+    MatTooltipModule,
+    NgxSkeletonLoaderModule
+  ],
   selector: 'gf-portfolio-summary',
   styleUrls: ['./portfolio-summary.component.scss'],
   templateUrl: './portfolio-summary.component.html'
@@ -48,6 +55,8 @@ export class GfPortfolioSummaryComponent implements OnChanges {
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
 
+  protected readonly PerformanceCalculationType = PerformanceCalculationType;
+
   protected isCashExpanded = false;
   protected isHoldingsExpanded = false;
   protected precision = 2;