From 6602bddb2b8e040d313f5bd7a19433e315a1c993 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Fri, 7 Apr 2023 03:25:02 +0900
Subject: [PATCH] Fit mempool block skeleton loaders to screen

---
 .../mempool-blocks.component.ts               | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 1b647fc53..ab0a7fd08 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -97,7 +97,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     this.mempoolEmptyBlocks.forEach((b) => {
       this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
     });
-    this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks);
+    this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
 
     this.mempoolBlocks.map(() => {
       this.updateMempoolBlockStyles();
@@ -225,12 +225,33 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     this.animateEntry = false;
+    this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
   }
 
   trackByFn(index: number, block: MempoolBlock) {
     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[] {
     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)));