Merge pull request #3611 from mempool/nymkappa/fix-transaction-list-infinite-scroll

Fix infinite scroll transaction list component
This commit is contained in:
softsimon 2023-03-31 19:23:36 +09:00 committed by GitHub
commit 427cef9f9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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,15 +182,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
} }
onScroll(): void { onScroll(): void {
const scrollHeight = document.body.scrollHeight;
const scrollTop = document.documentElement.scrollTop;
if (scrollHeight > 0) {
const percentageScrolled = scrollTop * 100 / scrollHeight;
if (percentageScrolled > 50) {
this.loadMore.emit(); this.loadMore.emit();
} }
}
}
haveBlindedOutputValues(tx: Transaction): boolean { haveBlindedOutputValues(tx: Transaction): boolean {
return tx.vout.some((v: any) => v.value === undefined); return tx.vout.some((v: any) => v.value === undefined);