From 8569523b89f7e646a83e4338f41ed9a452ab19cc Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 19 Nov 2021 00:10:12 +0400
Subject: [PATCH] Moving chart loading spinner to chart component

fixes #885
---
 ...incoming-transactions-graph.component.html |  5 +++-
 .../incoming-transactions-graph.component.ts  | 25 ++++++++++++++++---
 .../mempool-graph.component.html              |  5 +++-
 .../mempool-graph/mempool-graph.component.ts  | 21 +++++++++++++++-
 .../statistics/statistics.component.html      | 15 +++--------
 .../television/television.component.html      |  9 ++-----
 .../television/television.component.scss      |  1 +
 .../app/dashboard/dashboard.component.html    | 23 +++++++----------
 .../src/app/dashboard/dashboard.component.ts  |  4 +--
 9 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
index 537aaceab..e9c022782 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html
@@ -1 +1,4 @@
-<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption"></div>
+<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 1edd5c208..622b8a296 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { formatDate } from '@angular/common';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
@@ -7,6 +7,14 @@ import { StorageService } from 'src/app/services/storage.service';
 @Component({
   selector: 'app-incoming-transactions-graph',
   templateUrl: './incoming-transactions-graph.component.html',
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 16px);
+      z-index: 100;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
@@ -18,6 +26,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
   @Input() left: number | string = '0';
   @Input() template: ('widget' | 'advanced') = 'widget';
 
+  isLoading = true;
   mempoolStatsChartOption: EChartsOption = {};
   mempoolStatsChartInitOption = {
     renderer: 'svg'
@@ -29,13 +38,23 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
     private storageService: StorageService,
   ) { }
 
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
   ngOnChanges(): void {
+    if (!this.data) {
+      return;
+    }
     this.windowPreference = this.storageService.getValue('graphWindowPreference');
     this.mountChart();
   }
 
-  ngOnInit(): void {
-    this.mountChart();
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
   }
 
   mountChart(): void {
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.html b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
index ac67c6e9e..f3ec401cf 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.html
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index a17cc8c3c..d6085b50c 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/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 &&
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index e335753ac..682e5a230 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -1,14 +1,7 @@
 <div class="container-graph">
   <div>
-    <div *ngIf="loading" class="loading">
-      <div class="text-center">
-        <h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
-        <br>
-        <div class="spinner-border text-light"></div>
-      </div>
-    </div>
     <div>
-      <div class="card mb-3" *ngIf="mempoolStats.length">
+      <div class="card mb-3">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
           <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
@@ -80,7 +73,7 @@
               <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
             </div>
           </form>
-          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
+          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
@@ -92,7 +85,7 @@
               [height]="500"
               [left]="65"
               [right]="10"
-              [data]="mempoolStats"
+              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"
             ></app-mempool-graph>
           </div>
         </div>
@@ -100,7 +93,7 @@
     </div>
 
     <div>
-      <div class="card mb-3" *ngIf="mempoolTransactionsWeightPerSecondData">
+      <div class="card mb-3">
         <div class="card-header">
             <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
         </div>
diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html
index 3644c4d6a..c9caa54ef 100644
--- a/frontend/src/app/components/television/television.component.html
+++ b/frontend/src/app/components/television/television.component.html
@@ -1,10 +1,5 @@
 <div id="tv-wrapper">
-
-  <div *ngIf="mempoolStats.length === 0" class="loading">
-    <div class="spinner-border text-light"></div>
-  </div>
-
-  <div class="tv-container" *ngIf="mempoolStats.length">
+  <div class="tv-container">
     <div class="chart-holder">
       <app-mempool-graph
         [template]="'advanced'"
@@ -12,7 +7,7 @@
         [height]="600"
         [left]="60"
         [right]="10"
-        [data]="mempoolStats"
+        [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"
         [showZoom]="false"
       ></app-mempool-graph>
     </div>
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss
index 78e27750c..8ee16c054 100644
--- a/frontend/src/app/components/television/television.component.scss
+++ b/frontend/src/app/components/television/television.component.scss
@@ -16,6 +16,7 @@
 }
 
 .chart-holder {
+  position: relative;
   height: 650px;
   width: 100%;
   margin: 30px auto 0;
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 002f3c702..530c365a0 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -47,14 +47,16 @@
               <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
               <hr>
             </div>
-            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
-              <app-mempool-graph
+            <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
+              <div class="mempool-graph">
+                <app-mempool-graph
                 [template]="'widget'"
                 [limitFee]="150"
                 [limitFilterFee]="1"
-                [data]="mempoolStats.mempool"
-              ></app-mempool-graph>
-            </div>
+                [data]="mempoolStats.value?.mempool"
+                ></app-mempool-graph>
+              </div>
+            </ng-container>
           </div>
         </div>
       </div>
@@ -67,10 +69,10 @@
               <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
             </div>
             <ng-template #mempoolGraph>
-              <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
+              <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
                 <app-incoming-transactions-graph
                   [left]="50"
-                  [data]="mempoolStats.weightPerSecond"
+                  [data]="mempoolStats.value?.weightPerSecond"
                   ></app-incoming-transactions-graph>
               </div>
             </ng-template>
@@ -280,13 +282,6 @@
   </div>
 </ng-template>
 
-
-<ng-template #loadingSpinner>
-  <div class="text-center loadingGraphs">
-    <div class="spinner-border text-light"></div>
-  </div>
-</ng-template>
-
 <ng-template #loadingDifficulty>
   <div class="difficulty-skeleton loading-container">
     <div class="item">
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index dad5b4a9f..ea843ec29 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -2,15 +2,13 @@ import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@
 import { combineLatest, merge, Observable, of, timer } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { Block } from '../interfaces/electrs.interface';
-import { LiquidPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
+import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
-import { formatDate } from '@angular/common';
 import { WebsocketService } from '../services/websocket.service';
 import { SeoService } from '../services/seo.service';
 import { StorageService } from '../services/storage.service';
-import { EChartsOption } from 'echarts';
 
 interface MempoolBlocksData {
   blocks: number;