Task/add loading indicator to access table (#7437)

* Add loading indicator

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a loading indicator to the access table to share the portfolio
+
 ### Changed
 
 - Deprecated `firstOrderDate` in favor of `dateOfFirstActivity` in the `GET api/v2/portfolio/performance` endpoint

apps/client/src/app/components/access-table/access-table.component.html

@@ -105,3 +105,14 @@
     <tr *matRowDef="let row; columns: displayedColumns()" mat-row></tr>
   </table>
 </div>
+
+@if (isLoading()) {
+  <ngx-skeleton-loader
+    animation="pulse"
+    class="px-4 py-3"
+    [theme]="{
+      height: '1.5rem',
+      width: '100%'
+    }"
+  />
+}

apps/client/src/app/components/access-table/access-table.component.ts

@@ -31,6 +31,7 @@ import {
   removeCircleOutline
 } from 'ionicons/icons';
 import ms from 'ms';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,6 +41,7 @@ import ms from 'ms';
     MatButtonModule,
     MatMenuModule,
     MatTableModule,
+    NgxSkeletonLoaderModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -68,6 +70,10 @@ export class GfAccessTableComponent {
     return columns;
   });
 
+  protected readonly isLoading = computed(() => {
+    return !this.accesses();
+  });
+
   private readonly clipboard = inject(Clipboard);
   private readonly notificationService = inject(NotificationService);
   private readonly snackBar = inject(MatSnackBar);