SSR: fix graph loading indicators

2023-11-02 01:29:55 +00:00
parent ed73c1e94c
commit 99730d02ab
38 changed files with 69 additions and 31 deletions
--- 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
@@ -65,7 +65,7 @@
  <div [class.chart]="!widget" [class.chart-widget]="widget" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
@@ -55,7 +55,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private storageService: StorageService,
    private miningService: MiningService,
-    private stateService: StateService,
+    public stateService: StateService,
    private router: Router,
    private zone: NgZone,
    private route: ActivatedRoute,
--- 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
@@ -39,7 +39,7 @@
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
@@ -12,6 +12,7 @@ import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
 import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
 import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-block-fees-graph',
@@ -54,6 +55,7 @@ export class BlockFeesGraphComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private storageService: StorageService,
    private miningService: MiningService,
+    public stateService: StateService,
    private route: ActivatedRoute,
    private fiatShortenerPipe: FiatShortenerPipe,
    private fiatCurrencyPipe: FiatCurrencyPipe,
--- 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
@@ -48,7 +48,7 @@
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
@@ -52,7 +52,7 @@ export class BlockHealthGraphComponent implements OnInit {
    private storageService: StorageService,
    private zone: NgZone,
    private route: ActivatedRoute,
-    private stateService: StateService,
+    public stateService: StateService,
    private router: Router,
  ) {
    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -83,7 +83,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  constructor(
    readonly ngZone: NgZone,
    readonly elRef: ElementRef,
-    private stateService: StateService,
+    public stateService: StateService,
  ) {
    this.webGlEnabled = detectWebGL();
    this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
--- 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
@@ -40,7 +40,7 @@
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
@@ -12,6 +12,7 @@ import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute } from '@angular/router';
 import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
 import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-block-rewards-graph',
@@ -54,6 +55,7 @@ export class BlockRewardsGraphComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private miningService: MiningService,
    private storageService: StorageService,
+    public stateService: StateService,
    private route: ActivatedRoute,
    private fiatShortenerPipe: FiatShortenerPipe,
    private fiatCurrencyPipe: FiatCurrencyPipe,
--- 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
@@ -47,7 +47,7 @@
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
@@ -10,6 +10,7 @@ import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
 import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-block-sizes-weights-graph',
@@ -52,6 +53,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private storageService: StorageService,
    private miningService: MiningService,
+    public stateService: StateService,
    private route: ActivatedRoute,
  ) {
  }
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
@@ -1,4 +1,4 @@
-<div class="fee-distribution-chart" *ngIf="mempoolVsizeFeesOptions; else loadingFees">
+<div class="fee-distribution-chart" *ngIf="mempoolVsizeFeesOptions && stateService.isBrowser; else loadingFees">
  <div *browserOnly echarts [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
 </div>

--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -36,7 +36,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
  };

  constructor(
-    private stateService: StateService,
+    public stateService: StateService,
    private vbytesPipe: VbytesPipe,
  ) { }

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

--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -60,7 +60,7 @@ export class HashrateChartComponent implements OnInit {
    private storageService: StorageService,
    private miningService: MiningService,
    private route: ActivatedRoute,
-    private stateService: StateService
+    public stateService: StateService
  ) {
  }

--- 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
@@ -34,7 +34,7 @@
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
    (chartInit)="onChartInit($event)">
  </div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -10,6 +10,7 @@ import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { download } from '../../shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
+import { StateService } from '../../services/state.service';

 interface Hashrate {
  timestamp: number;
@@ -60,6 +61,7 @@ export class HashrateChartPoolsComponent implements OnInit {
    private cd: ChangeDetectorRef,
    private storageService: StorageService,
    private miningService: MiningService,
+    public stateService: StateService,
    private route: ActivatedRoute,
  ) {
    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
--- 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,6 +1,6 @@
 <div class="echarts" *browserOnly echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
  (chartInit)="onChartInit($event)">
 </div>
-<div class="text-center loadingGraphs" *ngIf="isLoading">
+<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
  <div class="spinner-border text-light"></div>
 </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
@@ -48,7 +48,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
  constructor(
    @Inject(LOCALE_ID) private locale: string,
    private storageService: StorageService,
-    private stateService: StateService,
+    public stateService: StateService,
  ) { }

  ngOnInit() {
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
@@ -1,4 +1,4 @@
 <div class="echarts" *browserOnly echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
-<div class="text-center loadingGraphs" *ngIf="isLoading">
+<div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
  <div class="spinner-border text-light"></div>
 </div>
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
 import { formatDate, formatNumber } from '@angular/common';
-import { EChartsOption } from '../../graphs/echarts';
+import { EChartsOption } from 'echarts';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-lbtc-pegs-graph',
@@ -32,6 +33,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
  };

  constructor(
+    public stateService: StateService,
    @Inject(LOCALE_ID) private locale: string,
  ) { }

--- 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,4 @@
 <div *browserOnly echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
-<div class="text-center loadingGraphs" *ngIf="isLoading">
+<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
@@ -59,7 +59,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    private vbytesPipe: VbytesPipe,
    private wubytesPipe: WuBytesPipe,
    private amountShortenerPipe: AmountShortenerPipe,
-    private stateService: StateService,
+    public stateService: StateService,
    private storageService: StorageService,
    @Inject(LOCALE_ID) private locale: string,
  ) { }
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -80,7 +80,7 @@
      (chartInit)="onChartInit($event)">
    </div>

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

--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -41,7 +41,7 @@ export class PoolRankingComponent implements OnInit {
  miningStatsObservable$: Observable<MiningStats>;

  constructor(
-    private stateService: StateService,
+    public stateService: StateService,
    private storageService: StorageService,
    private formBuilder: UntypedFormBuilder,
    private miningService: MiningService,
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -169,7 +169,7 @@

  <!-- Hashrate chart -->
  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>