Ajout de loading sur le chargement

de l'application + lors du chargement
des composants

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html

@@ -1,7 +1,7 @@
-<button (click)="add()">Add a aircraft</button>
-<app-new-aircraft *ngIf="showAddForm === true"></app-new-aircraft>
-
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
+  <button (click)="add()">Add a aircraft</button>
+  <app-new-aircraft *ngIf="showAddForm === true"></app-new-aircraft>
+
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -16,6 +16,10 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+
+  <mat-paginator [length]="resultsLength" [pageSize]="5"></mat-paginator>
 </div>
-<mat-paginator [length]="resultsLength" [pageSize]="5"></mat-paginator>
-<ng-template #loading>Waiting...</ng-template>
+
+<ng-template #loading>
+  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+</ng-template>

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts

@@ -30,10 +30,12 @@ export class ListOfAircraftsComponent implements OnInit {
 
   private getListOfAircrafts() {
     this.serviceApi.getListOfAircrafts().subscribe(data => {
-      data.sort((a, b) => (b.name < a.name) ? 1 : -1);
-      this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
-      this.dataSourceTable.paginator = this.paginator;
-      this.resultsLength = data.length;
+      setTimeout(() => {
+        data.sort((a, b) => (b.name < a.name) ? 1 : -1);
+        this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
+        this.dataSourceTable.paginator = this.paginator;
+        this.resultsLength = data.length;
+      }, 2000);
     });
   }