Merge pull request #2375 from mempool/nymkappa/bugfix/loading-spinner

Fix infitinite loading spinner and positioning
This commit is contained in:
wiz 2022-08-25 01:18:31 +09:00 committed by GitHub
commit 1971d5d6b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 3 deletions

View File

@ -121,7 +121,7 @@
<div *ngIf="!error">
<div class="row">
<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 class="col-sm">
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>

View File

@ -105,6 +105,9 @@
top: 50%;
left: calc(50% - 15px);
z-index: 100;
@media (max-width: 767.98px) {
top: 550px;
}
}
.loading-spinner.widget {
position: absolute;
@ -115,4 +118,22 @@
@media (max-width: 767.98px) {
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;
}
}

View File

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