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

Add loading animation for channel list

Browse Source
This commit is contained in:
nymkappa
2022-08-29 22:25:43 +02:00
parent f2377a5f92
commit 90c0ece93f
5 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@@ -10,7 +10,7 @@
</div>
</form>
<table class="table table-borderless" *ngIf="response.channels.length > 0">
<table class="table table-borderless" *ngIf="response.channels.length > 0" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody>
<tr *ngFor="let channel of response.channels; let i = index;">

10
frontend/src/app/lightning/channels-list/channels-list.component.ts
View File

@@ -14,6 +14,7 @@ import { LightningApiService } from '../lightning-api.service';
export class ChannelsListComponent implements OnInit, OnChanges {
@Input() publicKey: string;
@Output() channelsStatusChangedEvent = new EventEmitter<string>();
@Output() loadingEvent = new EventEmitter<boolean>(false);
channels$: Observable<any>;
// @ts-ignore
@@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
defaultStatus = 'open';
status = 'open';
publicKeySize = 25;
isLoading = false;
constructor(
private lightningApiService: LightningApiService,
@@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
)
.pipe(
tap((val) => {
this.isLoading = true;
this.loadingEvent.emit(true);
if (typeof val === 'string') {
this.status = val;
this.page = 1;
@@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
}
}),
switchMap(() => {
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
}),
map((response) => {
this.isLoading = false;
this.loadingEvent.emit(false);
return {
channels: response.body,
totalItems: parseInt(response.headers.get('x-total-count'), 10)