Add loading indicators to product CRUD and dialog components

client/src/app/components/ps-product-crud/ps-product-crud.component.html

@@ -1,16 +1,27 @@
 <section class="crud">
   <div class="toolbar">
-    <button mat-raised-button color="primary" (click)="create()">
+    <button mat-raised-button
+            color="primary"
+            (click)="create()"
+            [disabled]="isLoading">
       <mat-icon>add</mat-icon>&nbsp;Nouveau produit
     </button>
 
     <mat-form-field appearance="outline" class="filter">
       <mat-label>Filtrer</mat-label>
-      <input matInput [formControl]="filterCtrl" placeholder="Nom, ID, catégorie, marque, fournisseur…">
+      <input matInput
+             [formControl]="filterCtrl"
+             placeholder="Nom, ID, catégorie, marque, fournisseur…"
+             [disabled]="isLoading">
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z2">
+  <div class="mat-elevation-z2 product-list-root">
+    <!-- Overlay de chargement -->
+    <div class="product-list-loading-overlay" *ngIf="isLoading">
+      <mat-spinner diameter="48"></mat-spinner>
+    </div>
+
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="id">
@@ -51,8 +62,19 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>Actions</th>
         <td mat-cell *matCellDef="let el">
-          <button mat-icon-button (click)="edit(el)" aria-label="edit"><mat-icon>edit</mat-icon></button>
-          <button mat-icon-button color="warn" (click)="remove(el)" aria-label="delete"><mat-icon>delete</mat-icon></button>
+          <button mat-icon-button
+                  aria-label="edit"
+                  (click)="edit(el)"
+                  [disabled]="isLoading">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button
+                  color="warn"
+                  aria-label="delete"
+                  (click)="remove(el)"
+                  [disabled]="isLoading">
+            <mat-icon>delete</mat-icon>
+          </button>
         </td>
       </ng-container>
 
@@ -60,10 +82,17 @@
       <tr mat-row *matRowDef="let row; columns: displayed;"></tr>
 
       <tr class="mat-row" *matNoDataRow>
-        <td class="mat-cell" [attr.colspan]="displayed.length">Aucune donnée.</td>
+        <td class="mat-cell" [attr.colspan]="displayed.length">
+          Aucune donnée.
+        </td>
       </tr>
     </table>
 
-    <mat-paginator [pageSizeOptions]="[5,10,25,100]" [pageSize]="10" aria-label="Pagination"></mat-paginator>
+    <mat-paginator
+      [pageSizeOptions]="[5,10,25,100]"
+      [pageSize]="10"
+      aria-label="Pagination"
+      [disabled]="isLoading">
+    </mat-paginator>
   </div>
 </section>