Add loading indicator

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);