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

Fit mempool block skeleton loaders to screen

Browse Source
This commit is contained in:
Mononaut 2023-04-07 03:25:02 +09:00
parent 32cd8bb3cb
commit 6602bddb2b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
1 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -97,7 +97,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.mempoolEmptyBlocks.forEach((b) => { this.mempoolEmptyBlocks.forEach((b) => {
this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index)); this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
}); });
this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks); this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
this.mempoolBlocks.map(() => { this.mempoolBlocks.map(() => {
this.updateMempoolBlockStyles(); this.updateMempoolBlockStyles();
@ -225,12 +225,33 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(): void { onResize(): void {
this.animateEntry = false; this.animateEntry = false;
this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
} }
trackByFn(index: number, block: MempoolBlock) { trackByFn(index: number, block: MempoolBlock) {
return (block.isStack) ? `stack-${block.index}` : block.index; return (block.isStack) ? `stack-${block.index}` : block.index;
} }
reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
while (blocks.length < blocksAmount) {
blocks.push({
blockSize: 0,
blockVSize: 0,
feeRange: [],
index: blocks.length,
medianFee: 0,
nTx: 0,
totalFees: 0
});
}
while (blocks.length > blocksAmount) {
blocks.pop();
}
return blocks;
}
reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding))); const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));