added loading indicator for tables

src/app/pages/tables/bikes/bikes.component.html

@@ -15,7 +15,7 @@
     <button
       mat-raised-button
       class="table-control-button"
-      (click)="addEmptyRow()"
+      
       [disabled]="reloadingTable"
     >
       <mat-icon class="spin">add</mat-icon>
@@ -35,6 +35,7 @@
     ></mat-paginator>
   </div>
   <div class="table-container">
+    
     <table
       mat-table
       class="mat-elevation-z8"
@@ -146,9 +147,19 @@
         </td>
       </ng-container>
 
+      <mat-spinner
+      [diameter]="32"
+      *ngIf="!isLoaded"
+    ></mat-spinner>
+     
+
       <!-- Table Definition -->
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
+
+    <mat-card *ngIf="!isLoaded" style="display: flex; justify-content: center; align-items: center">
+      <mat-spinner [diameter]="320"></mat-spinner>
+    </mat-card>
   </div>
 </div>

src/app/pages/tables/bikes/bikes.component.ts

@@ -16,6 +16,7 @@ import { logArrayInColumnInfoForm } from 'src/app/helperFunctions/logArrayInColu
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-bikes',
@@ -109,6 +110,7 @@ export class BikesComponent {
 
   relockingInterval = null;
   relockingDuration = 1000 * 60 * 1;
+  isLoaded = false;
 
   constructor(
     private bikesService: BikesService,
@@ -135,6 +137,7 @@ export class BikesComponent {
       this.reloadingTable = false;
       const tempDataSource = [];
       for (const row of newTableDataSource) {
+        this.isLoaded = true;
         const oldRow = this.getRowById(row.id);
         /** make sure to not overwrite a row that is being edited */
         if (!oldRow) {
@@ -149,6 +152,7 @@ export class BikesComponent {
     });
     this.bikesService.loadBikes();
 
+
     this.relockingInterval = setInterval(() => {
       for (const row of this.data.data) {
         if (row.isLockedByMe) {
@@ -212,6 +216,8 @@ export class BikesComponent {
 
   reloadTable() {
     this.reloadingTable = true;
+    this.isLoaded = false;
+    this.data.data = [];
     this.bikesService.loadBikes();
   }