Fix infinite scroll transaction list component

This commit is contained in:
nymkappa 2023-03-30 17:07:34 +09:00
parent 5ba2c181b0
commit aba49897f9
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
2 changed files with 6 additions and 9 deletions

View File

@ -1,3 +1,5 @@
<div infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
<ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn"> <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
<div *ngIf="!transactionPage" class="header-bg box tx-page-container"> <div *ngIf="!transactionPage" class="header-bg box tx-page-container">
<a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]"> <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
@ -11,7 +13,7 @@
</div> </div>
</div> </div>
<div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i"> <div class="header-bg box">
<div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div> <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
<div class="row"> <div class="row">
@ -321,6 +323,8 @@
</ng-container> </ng-container>
</div>
<ng-template #assetBox let-item> <ng-template #assetBox let-item>
{{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }} {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
<br /> <br />

View File

@ -182,14 +182,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
} }
onScroll(): void { onScroll(): void {
const scrollHeight = document.body.scrollHeight; this.loadMore.emit();
const scrollTop = document.documentElement.scrollTop;
if (scrollHeight > 0) {
const percentageScrolled = scrollTop * 100 / scrollHeight;
if (percentageScrolled > 50) {
this.loadMore.emit();
}
}
} }
haveBlindedOutputValues(tx: Transaction): boolean { haveBlindedOutputValues(tx: Transaction): boolean {