From a37dabf479ade5b5025afb4b1154900ede8f0fa4 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 27 Jul 2026 18:45:40 +0200
Subject: [PATCH] Task/add loading indicator to access table (#7437)

* Add loading indicator

* Update changelog
---
 CHANGELOG.md                                          |  4 ++++
 .../access-table/access-table.component.html          | 11 +++++++++++
 .../components/access-table/access-table.component.ts |  6 ++++++
 3 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc6882598..0e93211b3 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 9dd6c8374..9d87cbd79 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/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%'
+    }"
+  />
+}
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts
index 122b4f88b..00c5c1a28 100644
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/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);