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

Refactor block transactions

Browse Source
This commit is contained in:
softsimon
2024-05-19 00:39:33 +07:00
parent 0497c750be
commit a68c8d317c
7 changed files with 276 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/app/components/block/block.component.html
View File

@@ -325,53 +325,39 @@
>Details</button>
</div>
<div #blockTxTitle id="block-tx-title" class="block-tx-title">
<h2 class="text-left">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</h2>
<ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
</div>
<div class="clearfix"></div>
<app-transactions-list [transactions]="transactions" [paginated]="true" [blockTime]="block.timestamp"></app-transactions-list>
<ng-template [ngIf]="transactionsError">
<br>
<app-http-error [error]="transactionsError">
<span i18n="error.general-loading-data">Error loading data.</span>
</app-http-error>
<br>
<br>
</ng-template>
<ng-template [ngIf]="isLoadingTransactions && !transactionsError">
<div class="text-center mb-4" class="tx-skeleton">
<ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
@defer (on viewport) {
<app-block-transactions [paginationMaxSize]="paginationMaxSize" [block$]="block$" [txCount]="block.tx_count" [timestamp]="block.timestamp" [blockHash]="blockHash" [previousBlockHash]="block.previousblockhash" (blockReward)="updateBlockReward($event)"></app-block-transactions>
} @placeholder {
<div>
<div class="block-tx-title">
<h2 class="text-left">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</h2>
<ngb-pagination class="pagination-container float-right" [disabled]="true" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="stateService.env.ITEMS_PER_PAGE" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
</div>
<div class="clearfix"></div>
<div class="text-center mb-4" class="tx-skeleton">
<div class="header-bg box">
<div class="progress progress-dark" style="margin: 4px; height: 14px;">
<div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
</div>
<span class="skeleton-loader"></span>
</div>
</ng-container>
<div class="header-bg box">
<div class="row">
<div class="col-sm">
<span class="skeleton-loader"></span>
<span class="skeleton-loader"></span>
</div>
<div class="col-sm">
<span class="skeleton-loader"></span>
<div class="header-bg box">
<div class="row">
<div class="col-sm">
<span class="skeleton-loader"></span>
</div>
<div class="col-sm">
<span class="skeleton-loader"></span>
<span class="skeleton-loader"></span>
<span class="skeleton-loader"></span>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
}
<div class="clearfix"></div>
<br>
@@ -382,12 +368,6 @@
</app-http-error>
</ng-template>
<ng-template #headerLoader>
<div class="header-bg box">
<span class="skeleton-loader"></span>
</div>
</ng-template>
</div>
<ng-template #emptyBlockInfo>