Graphs loading indicators update

2025-04-10 04:49:19 +02:00 · 2024-05-23 18:40:48 +02:00 · 2024-05-23 18:40:48 +02:00 · 2c04896397
commit 2c04896397
parent 2341b1d79e
17 changed files with 27 additions and 30 deletions
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
@ -46,7 +46,7 @@
  </div>

  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
@ -63,7 +63,7 @@
  </div>

  <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
@ -37,7 +37,7 @@
  </div>

  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
@ -98,7 +98,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
          this.storageService.setValue('miningWindowPreference', timespan);
          this.timespan = timespan;
          this.zoomTimeSpan = timespan;
-          this.isLoading = true;
          return this.apiService.getHistoricalBlockFees$(timespan)
            .pipe(
              tap((response) => {
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.html
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.html
@ -46,7 +46,7 @@
  </div>

  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
@ -38,7 +38,7 @@
  </div>

  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
@ -45,7 +45,7 @@
  </div>

  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@ -55,7 +55,7 @@
  </div>

  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@ -32,7 +32,7 @@
  </div>

  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
  </div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
--- 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,5 +1,5 @@
 <div class="echarts" *browserOnly echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
-  (chartInit)="onChartInit($event)">
+  (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
 </div>
 <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
  <div class="spinner-border text-light"></div>
--- 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
@ -32,8 +32,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
  @Input() template: ('widget' | 'advanced') = 'widget';
  @Input() windowPreferenceOverride: string;
  @Input() outlierCappingEnabled: boolean = false;
+  @Input() isLoading: boolean;

-  isLoading = true;
  mempoolStatsChartOption: EChartsOption = {};
  mempoolStatsChartInitOption = {
    renderer: 'svg'
@ -52,8 +52,6 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
  ) { }

  ngOnInit() {
-    this.isLoading = true;
-
    this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
      this.weightMode = rateUnits === 'wu';
      if (this.data) {
@ -79,7 +77,6 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
    if (!this.data) {
      return; 
    }
-    this.isLoading = false;
  }

  /**
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.html
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
@ -1,4 +1,5 @@
-<div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+<div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" 
+  [options]="mempoolVsizeFeesOptions" [style]="{opacity: isLoading ? 0.5 : 1}"></div>
 <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
  <div class="spinner-border text-light"></div>
 </div>
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@ -35,8 +35,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  @Input() template: ('widget' | 'advanced') = 'widget';
  @Input() showZoom = true;
  @Input() windowPreferenceOverride: string;
+  @Input() isLoading: boolean;

-  isLoading = true;
  mempoolVsizeFeesData: any;
  mempoolVsizeFeesOptions: EChartsOption;
  mempoolVsizeFeesInitOptions = {
@ -65,7 +65,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  ) { }

  ngOnInit(): void {
-    this.isLoading = true;
    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
    this.isWidget = this.template === 'widget';
    this.showCount = !this.isWidget && !this.hideCount;
@ -86,7 +85,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    if (!this.data) {
      return;
    }
-    this.isLoading = false;
  }

  onChartReady(myChart: any) {
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@ -77,14 +77,14 @@

  <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
    <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-      (chartInit)="onChartInit($event)">
+      (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
    </div>

    <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
      <div class="spinner-border text-light"></div>
    </div>

-    <table *ngIf="widget === false" class="table table-borderless text-center pools-table">
+    <table *ngIf="widget === false" class="table table-borderless text-center pools-table" [style]="{opacity: isLoading ? 0.5 : 1}">
      <thead>
        <tr>
          <th class="d-none d-md-table-cell" i18n="mining.rank">Rank</th>
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@ -21,7 +21,7 @@
              </a>
            </div>
            <div class="btn-toggle-rows" name="radioBasic">
-              <div class="btn-group btn-group-toggle">
+              <div class="btn-group btn-group-toggle" [class]="{'disabled': isLoading}">
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '2h'">
                  <input type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h" formControlName="dateSpan"> 2H
                  (LIVE)
@ -40,7 +40,7 @@
                  <input type="radio" [value]="'3m'" [routerLink]="['/graphs' | relativeUrl]" fragment="3m" formControlName="dateSpan"> 3M
                </label>
              </div>
-              <div class="btn-group btn-group-toggle">
+              <div class="btn-group btn-group-toggle" [class]="{'disabled': isLoading}">
                <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
                  <input type="radio" [value]="'6m'" [routerLink]="['/graphs' | relativeUrl]" fragment="6m" formControlName="dateSpan"> 6M
                </label>
@ -94,13 +94,12 @@
              </button>
            </div>
          </form>
-          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
        </div>
        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [hideCount]="!showCount"
              [limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="showCount ? 50 : 10"
-              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
+              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null" [isLoading]="isLoading"></app-mempool-graph>
          </div>
        </div>
      </div>
@ -128,7 +127,7 @@
        <div class="card-body">
          <div class="incoming-transactions-graph">
            <app-incoming-transactions-graph #incominggraph [height]="500" [left]="65" [template]="'advanced'"
-              [data]="mempoolTransactionsWeightPerSecondData" [outlierCappingEnabled]="outlierCappingEnabled"></app-incoming-transactions-graph>
+              [data]="mempoolTransactionsWeightPerSecondData" [outlierCappingEnabled]="outlierCappingEnabled" [isLoading]="isLoading"></app-incoming-transactions-graph>
          </div>
        </div>
      </div>
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@ -231,4 +231,9 @@
  @media (max-width: 767px) {
    display: block;
  }
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
 }
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@ -26,8 +26,7 @@ export class StatisticsComponent implements OnInit {

  network = '';

-  loading = true;
-  spinnerLoading = false;
+  isLoading = true;
  feeLevels = feeLevels;
  chartColors = chartColors;
  filterSize = 100000;
@ -90,7 +89,7 @@ export class StatisticsComponent implements OnInit {
    .pipe(
      switchMap(() => {
        this.timespan = this.radioGroupForm.controls.dateSpan.value;
-        this.spinnerLoading = true;
+        this.isLoading = true;
        if (this.radioGroupForm.controls.dateSpan.value === '2h') {
          this.websocketService.want(['blocks', 'live-2h-chart']);
          return this.apiService.list2HStatistics$();
@ -131,8 +130,7 @@ export class StatisticsComponent implements OnInit {
    .subscribe((mempoolStats: any) => {
      this.mempoolStats = mempoolStats;
      this.handleNewMempoolData(this.mempoolStats.concat([]));
-      this.loading = false;
-      this.spinnerLoading = false;
+      this.isLoading = false;
    });

    this.stateService.live2Chart$