Ajout d'un loading sur la page Summary

Back/skydiveLogs-api/skydiveLogs-api.csproj.user

@@ -10,5 +10,6 @@
     <WebStackScaffolding_LayoutPageFile />
     <WebStackScaffolding_IsAsyncSelected>False</WebStackScaffolding_IsAsyncSelected>
     <NameOfLastUsedPublishProfile>skydiveLogsApi - Web Deploy</NameOfLastUsedPublishProfile>
+    <ShowAllFiles>false</ShowAllFiles>
   </PropertyGroup>
 </Project>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -46,7 +46,7 @@ export class NewJumpComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle("Add a new jump");
+    this.serviceComm.UpdatedComponentTitle('Add a new jump');
 
     this.endDate = new Date();
     this.beginDate = this.dateService.AddDays(new Date(), -1);
@@ -136,6 +136,6 @@ export class NewJumpComponent implements OnInit {
   }
 
   public allDatasLoaded(): boolean {
-    return this.countDatasLoaded == 4;
+    return this.countDatasLoaded === 4;
   }
 }

Front/skydivelogs-app/src/app/summary/summary.component.html

@@ -1,3 +1,4 @@
+<div *ngIf="allDatasLoaded() else loading">
   <div>
     <label>Total jumps</label>
     Total Total
@@ -89,3 +90,8 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
+</div>
+
+<ng-template #loading>
+  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+</ng-template>

Front/skydivelogs-app/src/app/summary/summary.component.ts

@@ -15,6 +15,7 @@ export class SummaryComponent implements OnInit {
   public dsNbJumpByGear;
   public dsNbJumpByType;
   public dsNbJumpByYear;
+  private countDatasLoaded: number;
 
   constructor(
     private serviceApi: StatsService,
@@ -22,24 +23,34 @@ export class SummaryComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.countDatasLoaded = 0;
     this.serviceComm.UpdatedComponentTitle('Summary');
 
     const statsResult = this.serviceApi.getStatsOfJumps();
 
     statsResult.statsByDz.subscribe(data => {
       this.dsNbJumpByDz = new MatTableDataSource(data);
+      this.countDatasLoaded++;
     });
     statsResult.statsByAircraft.subscribe(data => {
       this.dsNbJumpByAircraft = new MatTableDataSource(data);
+      this.countDatasLoaded++;
     });
     statsResult.statsByGear.subscribe(data => {
       this.dsNbJumpByGear = new MatTableDataSource(data);
+      this.countDatasLoaded++;
     });
     statsResult.statsByJumpType.subscribe(data => {
       this.dsNbJumpByType = new MatTableDataSource(data);
+      this.countDatasLoaded++;
     });
     statsResult.statsByYear.subscribe(data => {
       this.dsNbJumpByYear = new MatTableDataSource(data);
+      this.countDatasLoaded++;
     });
   }
+
+  public allDatasLoaded(): boolean {
+    return this.countDatasLoaded === 5;
+  }
 }