feat(lib): make isLoading a computed signal

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -77,7 +77,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.quantity"
+            [value]="isLoading() ? undefined : element.quantity"
           />
         </div>
       </td>
@@ -101,7 +101,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.valueInBaseCurrency"
+            [value]="isLoading() ? undefined : element.valueInBaseCurrency"
           />
         </div>
       </td>
@@ -122,7 +122,7 @@
           <gf-value
             [isPercent]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.allocationInPercentage"
+            [value]="isLoading() ? undefined : element.allocationInPercentage"
           />
         </div>
       </td>
@@ -144,7 +144,7 @@
             [isCurrency]="true"
             [locale]="locale"
             [value]="
-              isLoading ? undefined : element.netPerformanceWithCurrencyEffect
+              isLoading() ? undefined : element.netPerformanceWithCurrencyEffect
             "
           />
         </div>
@@ -168,7 +168,7 @@
             [isPercent]="true"
             [locale]="locale"
             [value]="
-              isLoading
+              isLoading()
                 ? undefined
                 : element.netPerformancePercentWithCurrencyEffect
             "
@@ -199,7 +199,7 @@
 
 <mat-paginator class="d-none" [pageSize]="pageSize" />
 
-@if (isLoading) {
+@if (isLoading()) {
   <ngx-skeleton-loader
     animation="pulse"
     class="px-4 py-3"

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -15,6 +15,7 @@ import {
   OnDestroy,
   Output,
   ViewChild,
+  computed,
   input
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -64,11 +65,12 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
   public dataSource = new MatTableDataSource<PortfolioPosition>();
   public displayedColumns: string[] = [];
   public ignoreAssetSubClasses = [AssetSubClass.CASH];
-  public isLoading = true;
   public routeQueryParams: Subscription;
 
   public readonly holdings = input.required<PortfolioPosition[]>();
 
+  protected readonly isLoading = computed(() => !this.holdings());
+
   private readonly unsubscribeSubject = new Subject<void>();
 
   public ngOnChanges() {
@@ -90,17 +92,11 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
 
     this.displayedColumns.push('performanceInPercentage');
 
-    this.isLoading = true;
-
     this.dataSource = new MatTableDataSource(this.holdings());
     this.dataSource.paginator = this.paginator;
     this.dataSource.sortingDataAccessor = getLowercase;
 
     this.dataSource.sort = this.sort;
-
-    if (this.holdings()) {
-      this.isLoading = false;
-    }
   }
 
   public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) {