machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SSR: fix graph loading indicators

Browse Source
This commit is contained in:
Mononaut
2023-11-02 01:29:55 +00:00
parent ed73c1e94c
commit 99730d02ab
38 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.html
View File

@@ -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>

2
frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
View File

@@ -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,
) {
}

3
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
View File

@@ -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>

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View File

@@ -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,

3
frontend/src/app/lightning/nodes-map/nodes-map.component.html
View File

@@ -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>

10
frontend/src/app/lightning/nodes-map/nodes-map.component.scss
View File

@@ -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;
}
}

8
frontend/src/app/lightning/nodes-map/nodes-map.component.ts
View File

@@ -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(() => {

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
View File

@@ -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>

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View File

@@ -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,
) {
}

2
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
View File

@@ -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>

2
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
View File

@@ -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,
) {
}

8
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
View File

@@ -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()
);