Improve loading state

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

@@ -9,6 +9,16 @@
       />
     </div>
   </div>
+  @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: '1rem', width: '6rem' }"
+        />
+      </div>
+    </div>
+  } @else {
     <div
       class="flex-nowrap px-3 py-1 row"
       [hidden]="summary?.activityCount === null"
@@ -28,6 +38,7 @@
         </span>
       </div>
     </div>
+  }
   <div class="row">
     <div class="col"><hr /></div>
   </div>
@@ -127,11 +138,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>
+      @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

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'
@@ -47,6 +54,7 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   protected readonly buyAndSellActivitiesTooltip = translate(
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
+  protected readonly PerformanceCalculationType = PerformanceCalculationType;
 
   protected isCashExpanded = false;
   protected isHoldingsExpanded = false;