SSR: fix graph loading indicators

2025-02-24 22:58:30 +01:00 · 2023-11-02 01:29:55 +00:00 · 2023-11-02 01:29:55 +00:00 · 99730d02ab
commit 99730d02ab
parent ed73c1e94c
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>

--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
@ -1,7 +1,7 @@
 <div class="full-container">

  <div [class]="!widget ? 'chart' : 'chart-widget'" *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/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
@ -8,6 +8,7 @@ import { StorageService } from '../../services/storage.service';
 import { download } from '../../shared/graphs.utils';
 import { LightningApiService } from '../lightning-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-node-statistics-chart',
@ -48,6 +49,7 @@ export class NodeStatisticsChartComponent implements OnInit {
    @Inject(LOCALE_ID) public locale: string,
    private lightningApiService: LightningApiService,
    private storageService: StorageService,
+    public stateService: StateService,
    private activatedRoute: ActivatedRoute,
  ) {
  }
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@ -6,7 +6,8 @@
      </div>
      <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>
    </div>
-    <div class="text-center loading-spinner" [class]="style" *ngIf="isLoading && !disableSpinner">
+
+    <div class="text-center loading-spinner" [class]="style" *ngIf="(!stateService.isBrowser || isLoading) && !disableSpinner">
      <div class="spinner-border text-light"></div>
    </div>
  </ng-container>
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@ -45,7 +45,7 @@ export class NodesChannelsMap implements OnInit {
  constructor(
    private seoService: SeoService,
    private apiService: ApiService,
-    private stateService: StateService,
+    public stateService: StateService,
    private assetsService: AssetsService,
    private router: Router,
    private zone: NgZone,
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.html
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
@ -12,5 +12,8 @@
      (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
    </div>
  </ng-container>
+  <div class="text-center loading-spinner" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>

 </div>
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.scss
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.scss
@ -63,3 +63,13 @@
 .chart.widget {
  padding: 0px;
 }
+
+.loading-spinner {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 15px);
+  z-index: 100;
+  @media (max-width: 767.98px) {
+    top: 550px;
+  }
+}
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
@ -26,6 +26,7 @@ export class NodesMap implements OnInit, OnChanges {
  inputNodes$: BehaviorSubject<any>;
  nodes$: Observable<any>;
  observable$: Observable<any>;
+  isLoading: boolean = true;

  chartInstance = undefined;
  chartOptions: EChartsOption = {};
@ -37,7 +38,7 @@ export class NodesMap implements OnInit, OnChanges {
    @Inject(LOCALE_ID) public locale: string,
    private seoService: SeoService,
    private apiService: ApiService,
-    private stateService: StateService,
+    public stateService: StateService,
    private assetsService: AssetsService,
    private router: Router,
    private zone: NgZone,
@ -226,6 +227,7 @@ export class NodesMap implements OnInit, OnChanges {
        },
      ]
    };
+    this.isLoading = false;
  }

  onChartInit(ec) {
@ -235,6 +237,10 @@ export class NodesMap implements OnInit, OnChanges {

    this.chartInstance = ec;

+    this.chartInstance.on('finished', () => {
+      this.isLoading = false;
+    });
+
    this.chartInstance.on('click', (e) => {
      if (e.data) {
        this.zone.run(() => {
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
@ -36,7 +36,7 @@
  </div>

  <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? (height + '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/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@ -11,6 +11,7 @@ import { SeoService } from '../../services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
 import { isMobile } from '../../shared/common.utils';
+import { StateService } from '../../services/state.service';

@Component({
  selector: 'app-nodes-networks-chart',
@ -58,6 +59,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
    private formBuilder: UntypedFormBuilder,
    private storageService: StorageService,
    private miningService: MiningService,
+    public stateService: StateService,
    private amountShortenerPipe: AmountShortenerPipe,
  ) {
  }
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@ -17,7 +17,7 @@
      </div>
    </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/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@ -37,7 +37,7 @@ export class NodesPerCountryChartComponent implements OnInit {
    private seoService: SeoService,
    private amountShortenerPipe: AmountShortenerPipe,
    private zone: NgZone,
-    private stateService: StateService,
+    public stateService: StateService,
    private router: Router,
  ) {
  }
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject, combineLatest, map, Observable, share, tap } from 'rxjs';
 import { ApiService } from '../../services/api.service';
@ -27,6 +27,7 @@ export class NodesPerCountry implements OnInit {
  constructor(
    private apiService: ApiService,
    private seoService: SeoService,
+    private cd: ChangeDetectorRef,
    private route: ActivatedRoute,
  ) {
    for (let i = 0; i < this.pageSize; ++i) {
@ -94,7 +95,10 @@ export class NodesPerCountry implements OnInit {
            ispCount: Object.keys(isps).length
          };
        }),
-        tap(() => this.isLoading = false),
+        tap(() => {
+          this.isLoading = false
+          this.cd.markForCheck();
+        }),
        share()
      );