feat(ui): implement computed signal on isLoading

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

@@ -177,7 +177,7 @@
             [deviceType]="deviceType"
             [isDate]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.date"
+            [value]="isLoading() ? undefined : element.date"
           />
         </div>
       </td>
@@ -201,7 +201,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.quantity"
+            [value]="isLoading() ? undefined : element.quantity"
           />
         </div>
       </td>
@@ -225,7 +225,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.unitPrice"
+            [value]="isLoading() ? undefined : element.unitPrice"
           />
         </div>
       </td>
@@ -249,7 +249,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.fee"
+            [value]="isLoading() ? undefined : element.fee"
           />
         </div>
       </td>
@@ -272,7 +272,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.value"
+            [value]="isLoading() ? undefined : element.value"
           />
         </div>
       </td>
@@ -304,7 +304,7 @@
           <gf-value
             [isCurrency]="true"
             [locale]="locale"
-            [value]="isLoading ? undefined : element.valueInBaseCurrency"
+            [value]="isLoading() ? undefined : element.valueInBaseCurrency"
           />
         </div>
       </td>
@@ -500,7 +500,7 @@
   </table>
 </div>
 
-@if (isLoading) {
+@if (isLoading()) {
   <ngx-skeleton-loader
     animation="pulse"
     class="px-4 py-3"
@@ -514,7 +514,7 @@
 <mat-paginator
   [length]="totalItems"
   [ngClass]="{
-    'd-none': (isLoading && !totalItems) || totalItems <= pageSize
+    'd-none': (isLoading() && !totalItems) || totalItems <= pageSize
   }"
   [pageIndex]="pageIndex"
   [pageSize]="pageSize"
@@ -526,7 +526,7 @@
   !hasActivities &&
   dataSource().data.length === 0 &&
   hasPermissionToCreateActivity &&
-  !isLoading
+  !isLoading()
 ) {
   <div class="p-3 text-center">
     <gf-no-transactions-info-indicator [hasBorder]="false" />

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

@@ -26,6 +26,7 @@ import {
   OnInit,
   Output,
   ViewChild,
+  computed,
   inject,
   input
 } from '@angular/core';
@@ -138,13 +139,16 @@ export class GfActivitiesTableComponent
   public hasDrafts = false;
   public hasErrors = false;
   public isAfter = isAfter;
-  public isLoading = true;
   public isUUID = isUUID;
   public routeQueryParams: Subscription;
   public selectedRows = new SelectionModel<Activity>(true, []);
 
   public readonly dataSource = input.required<MatTableDataSource<Activity>>();
 
+  public readonly isLoading = computed(() => {
+    return !this.dataSource();
+  });
+
   private readonly notificationService = inject(NotificationService);
   private readonly unsubscribeSubject = new Subject<void>();
 
@@ -220,10 +224,6 @@ export class GfActivitiesTableComponent
         return column !== 'nameWithSymbol';
       });
     }
-
-    if (this.dataSource()) {
-      this.isLoading = false;
-    }
   }
 
   public areAllRowsSelected() {