Ajout de loading sur le chargement

de l'application + lors du chargement
des composants

Front/skydivelogs-app/angular.json

@@ -20,10 +20,10 @@
               "src/assets",
               "src/favicon.ico"
             ],
-            "styles": [{
+            "styles": [
-                "input": "src/custom-theme.scss"
+              "src/assets/css/styles-app-loading.scss",
-              },
+              "src/assets/css/custom-theme.scss",
-              "src/styles.css"
+              "src/assets/css/styles.css"
             ],
             "scripts": []
           },

Front/skydivelogs-app/src/app/app.module.ts

@@ -37,7 +37,8 @@ import {
   MatInputModule,
   MatButtonModule,
   MatIconModule,
-  MatAutocompleteModule
+  MatAutocompleteModule,
+  MatProgressSpinnerModule
 } from '@angular/material';
 
 import { RequestCache } from '../services/request-cache.service';
@@ -90,7 +91,8 @@ const appRoutes: Routes = [
     MatInputModule,
     MatButtonModule,
     MatIconModule,
-    MatAutocompleteModule
+    MatAutocompleteModule,
+    MatProgressSpinnerModule
   ],
   exports: [HttpClientModule],
   providers: [

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);
+      setTimeout(() => {
-      this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
+        data.sort((a, b) => (b.name < a.name) ? 1 : -1);
-      this.dataSourceTable.paginator = this.paginator;
+        this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
-      this.resultsLength = data.length;
+        this.dataSourceTable.paginator = this.paginator;
+        this.resultsLength = data.length;
+      }, 2000);
     });
   }
 

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

@@ -1,7 +1,7 @@
-<button (click)="add()">Add a aircraft</button>
-<app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
-
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
+  <button (click)="add()">Add a aircraft</button>
+  <app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
+
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">
       <th mat-header-cell *matHeaderCellDef></th>
@@ -52,7 +52,11 @@
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
   </table>
+  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 </div>
-<mat-paginator [length]="resultsLength" [pageSize]="20"></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-dzs/list-of-dzs.component.ts

@@ -41,10 +41,12 @@ export class ListOfDzsComponent implements OnInit {
 
   private getListOfDropZones() {
     this.serviceApiGet.getListOfDropZones().subscribe(data => {
-      data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
+      setTimeout(() => {
-      this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
+        data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
-      this.dataSourceTable.paginator = this.paginator;
+        this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
-      this.resultsLength = data.length;
+        this.dataSourceTable.paginator = this.paginator;
+        this.resultsLength = data.length;
+      }, 2000);
     });
   }
 

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

@@ -1,7 +1,7 @@
-<button (click)="add()">Add a aircraft</button>
-<app-new-gear *ngIf="showAddForm === true"></app-new-gear>
-
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
+  <button (click)="add()">Add a aircraft</button>
+  <app-new-gear *ngIf="showAddForm === true"></app-new-gear>
+
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -41,6 +41,9 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
-<mat-paginator [length]="resultsLength" [pageSize]="10"></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-gears/list-of-gears.component.ts

@@ -44,9 +44,11 @@ export class ListOfGearsComponent implements OnInit {
 
   getListOfGears() {
     this.serviceApi.getListOfGears().subscribe(data => {
-      this.dataSourceTable = new MatTableDataSource<GearResp>(data);
+      setTimeout(() => {
-      this.dataSourceTable.paginator = this.paginator;
+        this.dataSourceTable = new MatTableDataSource<GearResp>(data);
-      this.resultsLength = data.length;
+        this.dataSourceTable.paginator = this.paginator;
+        this.resultsLength = data.length;
+      }, 2000);
     });
   }
 

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,7 +1,7 @@
-<button (click)="add()">Add a aircraft</button>
-<app-new-jump-type *ngIf="showAddForm === true"></app-new-jump-type>
-
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
+  <button (click)="add()">Add a aircraft</button>
+  <app-new-jump-type *ngIf="showAddForm === true"></app-new-jump-type>
+
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -16,6 +16,9 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 </div>
-<mat-paginator [length]="resultsLength" [pageSize]="20"></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-jump-types/list-of-jump-types.component.ts

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

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

@@ -30,6 +30,9 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
-<mat-paginator [length]="resultsLength" [pageSize]="10"></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-jumps/list-of-jumps.component.ts

@@ -39,10 +39,12 @@ export class ListOfJumpsComponent implements OnInit {
   getListOfJumps() {
     this.listOfJumps = this.serviceApi.getListOfJumps();
     this.listOfJumps.subscribe(data => {
-      data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime());
+      setTimeout(() => {
-      this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
+        data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime());
-      this.dataSourceTable.paginator = this.paginator;
+        this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
-      this.resultsLength = data.length;
+        this.dataSourceTable.paginator = this.paginator;
+        this.resultsLength = data.length;
+      }, 2000);
     });
   }
 }

Front/skydivelogs-app/src/assets/css/styles-app-loading.scss

@@ -0,0 +1,62 @@
+.app-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.app-loading {
+  .logo {
+    width: 100px;
+    height: 100px;
+
+    // this way asset gets processed by webpack 
+    background: url(assets/img/logo.png) center center no-repeat;
+  }
+}
+
+.app-loading .spinner {
+  height: 200px;
+  width: 200px;
+  animation: rotate 2s linear infinite;
+  transform-origin: center center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.app-loading .spinner .path {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+  stroke: #ddd;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

Front/skydivelogs-app/src/index.html

@@ -5,8 +5,6 @@
   <meta charset="utf-8">
   <title>SkydivelogsApp</title>
   <base href="/">
-
-  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
@@ -14,7 +12,15 @@
 </head>
 
 <body>
-  <app-root></app-root>
+  <app-root>
+    <!-- loading layout replaced by app after startupp -->
+    <div class="app-loading">
+      <div class="logo">LOGO</div>
+      <svg class="spinner" viewBox="25 25 50 50">
+        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+      </svg>
+    </div>
+  </app-root>
 </body>
 
 </html>