Improve idle style of table

src/app/components/table/table.component.html

@@ -63,6 +63,8 @@
       showFirstLastButtons
     ></mat-paginator>
   </div>
+
+  <!-- Table -->
   <div class="table-container">
     <table
       mat-table
@@ -72,6 +74,7 @@
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
       [dataSource]="data"
+      [ngClass]="{ 'idle-overlay': !isLoaded }"
     >
       <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
@@ -361,14 +364,16 @@
         *matHeaderRowDef="displayedColumns; sticky: true"
         #headerRow
       ></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr
+        [ngClass]="{ 'idle-overlay': isProcessing }"
+        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]="32"></mat-spinner>
-    </mat-card>
   </div>
+  <mat-spinner
+    class="idle-spinner"
+    *ngIf="!isLoaded || isProcessing"
+    [diameter]="48"
+  ></mat-spinner>
 </div>

src/app/components/table/table.component.scss

@@ -26,8 +26,17 @@
       margin-right: 0.5em;
     }
   }
+  .idle-overlay {
+    filter: blur(5px);
+  }
+  .idle-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 999;
+  }
   .table-container {
-    flex: 1;
     width: auto;
     margin-left: 0.5em;
     margin-right: 0.5em;

src/app/components/table/table.component.ts

@@ -92,6 +92,7 @@ export class TableComponent implements AfterViewInit {
   filterChanged: Subject<any> = new Subject<any>();
 
   isLoaded = false;
+  isProcessing = false;
 
   @Output() createEvent = new EventEmitter();
   @Output() lockEvent = new EventEmitter();
@@ -151,11 +152,11 @@ export class TableComponent implements AfterViewInit {
     });
 
     this.dataService.tableData.subscribe((newTableDataSource) => {
-      this.reloadingTable = false;
       const tempDataSource = [];
       if (newTableDataSource === null) {
         return;
       }
+      this.reloadingTable = false;
       this.isLoaded = true;
       for (const row of newTableDataSource) {
         const oldRow = this.getRowById(row.id);
@@ -427,10 +428,10 @@ export class TableComponent implements AfterViewInit {
   }
 
   applyFilters(): void {
-    this.isLoaded = false;
+    this.isProcessing = true;
     setTimeout(() => {
       this.data.filter = (this.filters as unknown) as string;
-      this.isLoaded = true;
+      this.isProcessing = false;
     });
   }