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
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 32 additions and 6 deletions
Show Stats 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> </div>
</form> </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> <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody> <tbody>
<tr *ngFor="let channel of response.channels; let i = index;"> <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 { export class ChannelsListComponent implements OnInit, OnChanges {
@Input() publicKey: string; @Input() publicKey: string;
@Output() channelsStatusChangedEvent = new EventEmitter<string>(); @Output() channelsStatusChangedEvent = new EventEmitter<string>();
@Output() loadingEvent = new EventEmitter<boolean>(false);
channels$: Observable<any>; channels$: Observable<any>;
// @ts-ignore // @ts-ignore
@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
defaultStatus = 'open'; defaultStatus = 'open';
status = 'open'; status = 'open';
publicKeySize = 25; publicKeySize = 25;
isLoading = false;
constructor( constructor(
private lightningApiService: LightningApiService, private lightningApiService: LightningApiService,
@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
) )
.pipe( .pipe(
tap((val) => { tap((val) => {
this.isLoading = true;
this.loadingEvent.emit(true);
if (typeof val === 'string') { if (typeof val === 'string') {
this.status = val; this.status = val;
this.page = 1; this.page = 1;
@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
} }
}), }),
switchMap(() => { switchMap(() => {
this.channelsStatusChangedEvent.emit(this.status); this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status); return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
}), }),
map((response) => { map((response) => {
this.isLoading = false;
this.loadingEvent.emit(false);
return { return {
channels: response.body, channels: response.body,
totalItems: parseInt(response.headers.get('x-total-count'), 10) totalItems: parseInt(response.headers.get('x-total-count'), 10)

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

@ -133,7 +133,7 @@
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels> <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between"> <div class="d-flex">
<h2 *ngIf="channelsListStatus === 'open'"> <h2 *ngIf="channelsListStatus === 'open'">
<span i18n="lightning.open-channels">Open channels</span> <span i18n="lightning.open-channels">Open channels</span>
<span> ({{ node.opened_channel_count }})</span> <span> ({{ node.opened_channel_count }})</span>
@ -142,10 +142,13 @@
<span i18n="lightning.open-channels">Closed channels</span> <span i18n="lightning.open-channels">Closed channels</span>
<span> ({{ node.closed_channel_count }})</span> <span> ({{ node.closed_channel_count }})</span>
</h2> </h2>
<div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
</div> </div>
<app-channels-list [publicKey]="node.public_key" <app-channels-list [publicKey]="node.public_key"
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list> (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
(loadingEvent)="onLoadingEvent($event)"
></app-channels-list>
</div> </div>
</div> </div>

13
frontend/src/app/lightning/node/node.component.scss
View File

@ -56,4 +56,17 @@ app-fiat {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
} }
}
.spinner-border {
@media (min-width: 768px) {
margin-top: 6.5px;
width: 1.75rem;
height: 1.75rem;
}
@media (max-width: 768px) {
margin-top: 2.3px;
width: 1.5rem;
height: 1.5rem;
}
} }

6
frontend/src/app/lightning/node/node.component.ts
View File

@ -22,7 +22,7 @@ export class NodeComponent implements OnInit {
channelsListStatus: string; channelsListStatus: string;
error: Error; error: Error;
publicKey: string; publicKey: string;
channelListLoading = false;
publicKeySize = 99; publicKeySize = 99;
constructor( constructor(
@ -97,4 +97,8 @@ export class NodeComponent implements OnInit {
onChannelsListStatusChanged(e) { onChannelsListStatusChanged(e) {
this.channelsListStatus = e; this.channelsListStatus = e;
} }
onLoadingEvent(e) {
this.channelListLoading = e;
}
} }