multiblock fix padding, add loading spinner

frontend/src/app/components/eight-blocks/eight-blocks.component.html

@@ -1,7 +1,7 @@
 
 <app-block-overview-multi
   #blockGraph
-  [isLoading]="false"
+  [isLoading]="isLoadingTransactions"
   [numBlocks]="numBlocks"
   [padding]="padding"
   [blockWidth]="blockWidth"
@@ -11,7 +11,6 @@
   [flip]="false"
   [animationDuration]="animationDuration"
   [animationOffset]="animationOffset"
-  [disableSpinner]="true"
 ></app-block-overview-multi>
 <div class="blocks" [class.wrap]="wrapBlocks">
   <ng-container *ngFor="let i of blockIndices">

frontend/src/app/components/eight-blocks/eight-blocks.component.ts

@@ -121,7 +121,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
         this.autoNumBlocks = true;
         const width = window.innerWidth;
         const height = window.innerHeight;
-        this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
+        const paddedWidth = this.blockWidth + (this.padding * 2);
+        this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
       }
 
       this.blockIndices = [...Array(this.numBlocks).keys()];
@@ -171,7 +172,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
       this.autoNumBlocks = true;
       const width = window.innerWidth;
       const height = window.innerHeight;
-      this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
+      const paddedWidth = this.blockWidth + (this.padding * 2);
+      this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
       this.blockIndices = [...Array(this.numBlocks).keys()];
 
       if (this.autofit) {
@@ -234,6 +236,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
       }
     }
     await Promise.allSettled(readyPromises);
+    this.isLoadingTransactions = false;
     this.updateBlockGraphs(blocks);
 
     // free up old transactions
@@ -280,7 +283,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     const startTime = performance.now() + 1000 - (this.stagger < 0 ? this.stagger * 8 : 0);
     if (this.blockGraph) {
       for (let i = 0; i < this.numBlocks; i++) {
-        this.blockGraph.replace(i, this.strippedTransactions[blocks?.[i]?.height] || [], 'right', false, startTime + (this.stagger * i));
+        this.blockGraph.replace(i, this.strippedTransactions[blocks?.[this.getBlockIndex(i)]?.height] || [], 'right', false, startTime + (this.stagger * i));
       }
     }
     this.showInfo = false;
@@ -299,8 +302,19 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     if (this.blockGraph) {
       for (let i = 0; i < this.numBlocks; i++) {
         this.blockGraph.destroy(i);
-        this.blockGraph.setup(i, this.strippedTransactions[this.latestBlocks?.[i]?.height] || []);
+        this.blockGraph.setup(i, this.strippedTransactions[this.latestBlocks?.[this.getBlockIndex(i)]?.height] || []);
       }
     }
   }
+
+  getBlockIndex(slotIndex: number): number {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const paddedWidth = this.blockWidth + (this.padding * 2);
+    const blocksPerRow = Math.floor(width / paddedWidth);
+    const blocksPerColumn = Math.floor(height / paddedWidth);
+    const row = Math.floor(slotIndex / blocksPerRow);
+    const column = slotIndex % blocksPerRow;
+    return (blocksPerColumn - 1 - row) * blocksPerRow + column;
+  }
 }

frontend/src/app/components/eight-mempool/eight-mempool.component.html

@@ -1,6 +1,6 @@
 <app-block-overview-multi
   #blockGraph
-  [isLoading]="false"
+  [isLoading]="isLoading"
   [numBlocks]="numBlocks"
   [padding]="padding"
   [blockWidth]="blockWidth"
@@ -11,6 +11,5 @@
   [showFilters]="true"
   [animationDuration]="animationDuration"
   [animationOffset]="animationOffset"
-  [disableSpinner]="true"
   (txClickEvent)="onTxClick($event)"
 ></app-block-overview-multi>

frontend/src/app/components/eight-mempool/eight-mempool.component.ts

@@ -46,6 +46,7 @@ function bestFitResolution(min, max, n): number {
 export class EightMempoolComponent implements OnInit, OnDestroy {
   network = '';
   strippedTransactions: { [height: number]: TransactionStripped[] } = {};
+  isLoading = true;
   webGlEnabled = true;
   hoverTx: string | null = null;
 
@@ -161,7 +162,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
         this.autoNumBlocks = true;
         const width = window.innerWidth;
         const height = window.innerHeight;
-        this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
+        const paddedWidth = this.blockWidth + (this.padding * 2);
+        this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
       }
 
       this.blockIndices = [...Array(this.numBlocks).keys()];
@@ -203,7 +205,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
       this.autoNumBlocks = true;
       const width = window.innerWidth;
       const height = window.innerHeight;
-      this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
+      const paddedWidth = this.blockWidth + (this.padding * 2);
+      this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
       this.blockIndices = [...Array(this.numBlocks).keys()];
       this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
 
@@ -239,6 +242,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
     } else {
       this.blockGraph.update(this.numBlocks - delta.block - 1, delta.added, delta.removed, delta.changed || [], this.poolDirection);
     }
+    this.isLoading = false;
 
     this.lastBlockHeightUpdate[delta.block] = this.stateService.latestBlockHeight;
   }