Moving chart loading spinner to chart component

fixes #885

frontend/src/app/components/mempool-graph/mempool-graph.component.html

@@ -1 +1,4 @@
-<div echarts class="echarts" (chartInit)="onChartReady($event)" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+<div echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -12,6 +12,14 @@ import { feeLevels, chartColors } from 'src/app/app.constants';
 @Component({
   selector: 'app-mempool-graph',
   templateUrl: './mempool-graph.component.html',
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 16px);
+      z-index: 100;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolGraphComponent implements OnInit, OnChanges {
@@ -25,6 +33,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() template: ('widget' | 'advanced') = 'widget';
   @Input() showZoom = true;
 
+  isLoading = true;
   mempoolVsizeFeesData: any;
   mempoolVsizeFeesOptions: EChartsOption;
   mempoolVsizeFeesInitOptions = {
@@ -45,16 +54,26 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit(): void {
+    this.isLoading = true;
     this.inverted = this.storageService.getValue('inverted-graph') === 'true';
-    this.mountFeeChart();
   }
 
   ngOnChanges() {
+    if (!this.data) {
+      return;
+    }
     this.windowPreference = this.storageService.getValue('graphWindowPreference');
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
     this.mountFeeChart();
   }
 
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
   onChartReady(myChart: any) {
     myChart.getZr().on('mousemove', (e: any) => {
       if (e.target !== undefined &&