Disable mined block animations

frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss

@@ -26,6 +26,7 @@
 
 .loader-wrapper {
   position: absolute;
+  background: #181b2d7f;
   left: 0;
   right: 0;
   top: 0;

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -68,6 +68,21 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
     this.start();
   }
 
+  destroy(): void {
+    if (this.scene) {
+      this.scene.destroy();
+      this.start();
+    }
+  }
+
+  // initialize the scene without any entry transition
+  setup(transactions: TransactionStripped[]): void {
+    if (this.scene) {
+      this.scene.setup(transactions);
+      this.start();
+    }
+  }
+
   enter(transactions: TransactionStripped[], direction: string): void {
     if (this.scene) {
       this.scene.enter(transactions, direction);

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -29,10 +29,6 @@ export default class BlockScene {
     this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray });
   }
 
-  destroy(): void {
-    Object.values(this.txs).forEach(tx => tx.destroy());
-  }
-
   resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
     this.width = width;
     this.height = height;
@@ -46,6 +42,36 @@ export default class BlockScene {
     }
   }
 
+  // Destroy the current layout and clean up graphics sprites without any exit animation
+  destroy(): void {
+    Object.values(this.txs).forEach(tx => tx.destroy());
+    this.txs = {};
+    this.layout = null;
+  }
+
+  // set up the scene with an initial set of transactions, without any transition animation
+  setup(txs: TransactionStripped[]) {
+    // clean up any old transactions
+    Object.values(this.txs).forEach(tx => {
+      tx.destroy();
+      delete this.txs[tx.txid];
+    });
+    this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
+    txs.forEach(tx => {
+      const txView = new TxView(tx, this.vertexArray);
+      this.txs[tx.txid] = txView;
+      this.place(txView);
+      this.saveGridToScreenPosition(txView);
+      this.applyTxUpdate(txView, {
+        display: {
+          position: txView.screenPosition,
+          color: txView.getColor()
+        },
+        duration: 0
+      });
+    });
+  }
+
   // Animate new block entering scene
   enter(txs: TransactionStripped[], direction) {
     this.replace(txs, direction);