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

Fix channel map loading spinners

Browse Source
This commit is contained in:
nymkappa 2022-08-23 17:52:37 +02:00
parent b121e46bcc
commit 4e9bc955e6
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,7 +121,7 @@
<div *ngIf="!error"> <div *ngIf="!error">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map> <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key" [hasLocation]="!!node.as_number"></app-nodes-channels-map>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart> <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>

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

@ -93,6 +93,9 @@
top: 50%; top: 50%;
left: calc(50% - 15px); left: calc(50% - 15px);
z-index: 100; z-index: 100;
@media (max-width: 767.98px) {
top: 550px;
}
} }
.loading-spinner.widget { .loading-spinner.widget {
position: absolute; position: absolute;
@ -104,3 +107,21 @@
top: 250px; top: 250px;
} }
} }
.loading-spinner.nodepage {
position: absolute;
top: 200px;
z-index: 100;
width: 100%;
left: 0;
}
.loading-spinner.channelpage {
position: absolute;
top: 400px;
z-index: 100;
width: 100%;
left: 0;
@media (max-width: 767.98px) {
top: 450px;
}
}

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

@ -21,6 +21,7 @@ export class NodesChannelsMap implements OnInit {
@Input() publicKey: string | undefined; @Input() publicKey: string | undefined;
@Input() channel: any[] = []; @Input() channel: any[] = [];
@Input() fitContainer = false; @Input() fitContainer = false;
@Input() hasLocation = true;
@Output() readyEvent = new EventEmitter(); @Output() readyEvent = new EventEmitter();
channelsObservable: Observable<any>; channelsObservable: Observable<any>;
@ -32,7 +33,7 @@ export class NodesChannelsMap implements OnInit {
channelColor = '#466d9d'; channelColor = '#466d9d';
channelCurve = 0; channelCurve = 0;
nodeSize = 4; nodeSize = 4;
isLoading = true; isLoading = false;
chartInstance = undefined; chartInstance = undefined;
chartOptions: EChartsOption = {}; chartOptions: EChartsOption = {};
@ -73,6 +74,11 @@ export class NodesChannelsMap implements OnInit {
this.channelsObservable = this.activatedRoute.paramMap this.channelsObservable = this.activatedRoute.paramMap
.pipe( .pipe(
switchMap((params: ParamMap) => { switchMap((params: ParamMap) => {
this.isLoading = true;
if (this.style === 'channelpage' && this.channel.length === 0 || !this.hasLocation) {
this.isLoading = false;
}
return zip( return zip(
this.assetsService.getWorldMapJson$, this.assetsService.getWorldMapJson$,
this.style !== 'channelpage' ? this.apiService.getChannelsGeo$(params.get('public_key') ?? undefined, this.style) : [''], this.style !== 'channelpage' ? this.apiService.getChannelsGeo$(params.get('public_key') ?? undefined, this.style) : [''],