Task/improve loading state of activity count in portfolio summary component (#7841)

* Improve loading state

* Update changelog

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

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

@@ -9,25 +9,33 @@
       />
     </div>
   </div>
-  <div
+  @if (isLoading) {
-    class="flex-nowrap px-3 py-1 row"
+    <div class="flex-nowrap px-3 py-1 row">
-    [hidden]="summary?.activityCount === null"
+      <div class="d-flex flex-grow-1 indent-1 text-truncate">
-  >
+        <ngx-skeleton-loader
-    <div class="d-flex flex-grow-1 indent-1 text-truncate">
+          animation="pulse"
-      {{ summary?.activityCount }}
+          [theme]="{ height: '1.5rem', width: '7.5rem' }"
-      <ng-container i18n>{summary?.activityCount, plural,
+        />
-        =1 {activity}
+      </div>
-        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>
+  } @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
+      @if (
-        class="d-none d-sm-inline-block initialism ml-2 text-muted"
+        user?.settings?.performanceCalculationType ===
-        title="Return on Average Investment"
+        PerformanceCalculationType.ROAI
-        >(ROAI)</abbr
+      ) {
-      >
+        <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

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;