Add loading spinner and adjust colors of statistic-components

src/app/components/shared/list-statistic/list-statistic.component.scss

@@ -28,7 +28,7 @@ mat-cell {
 
 mat-toolbar {
   height: 20px;
-  background-color: white;
+  background-color: #fff8e1;
 }
 
 .positiveC {
@@ -63,4 +63,3 @@ mat-toolbar {
 .emptyCC {
   background: #E0E0E0;
 }
-

src/app/components/shared/statistic/statistic.component.html

@@ -7,6 +7,11 @@
     <mat-toolbar></mat-toolbar>
   <div>
     <div style="position: relative; height: 60vh">
+      <div *ngIf="isLoading"                                                                                                                                                                                                                                                                                                                                                          fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+        <div fxLayout="row" fxLayoutAlign="center">
+          <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+        </div>
+      </div>
       <canvas id="chart"></canvas>
     </div>
   </div>

src/app/components/shared/statistic/statistic.component.scss

 mat-card {
   max-width: 800px;
   width: 100%;
+  background-color: #fff8e1 !important;
 }
 
 mat-toolbar {
   height: 15px;
-  background-color: white;
+  background-color: #fff8e1;
 }

src/app/components/shared/statistic/statistic.component.ts

@@ -32,6 +32,7 @@ export class StatisticComponent implements OnInit {
   contentId: string;
   subject: string;
   maxLength: number;
+  isLoading = true;
 
   constructor(protected route: ActivatedRoute,
               private contentService: ContentService) { }
@@ -47,6 +48,7 @@ export class StatisticComponent implements OnInit {
     });
     this.contentService.getChoiceContent(this.contentId).subscribe(content => {
       this.getData(content);
+      this.isLoading = false;
     });
   }
 

src/app/components/shared/statistics-page/statistics-page.component.scss

@@ -2,4 +2,5 @@ mat-card {
   max-width: 800px;
   width: 100%;
   min-height: 300px;
+  background-color: #fff8e1 !important;
 }