Improve blockchain animations during IBD

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

@@ -116,16 +116,18 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           }
 
           this.blockStyles = [];
-          if (!batch && block.height > this.chainTip) {
+          this.blocks.forEach((b, i) => {
-            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
+            if (i === 0 && !batch && block.height > this.chainTip) {
-            setTimeout(() => {
+              this.blockStyles.push(this.getStyleForBlock(b, i, -205));
-              this.blockStyles = [];
+              setTimeout(() => {
-              this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+                this.blockStyles = [];
-              this.cd.markForCheck();
+                this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
-            }, 50);
+                this.cd.markForCheck();
-          } else {
+              }, 50);
-            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+            } else {
-          }
+              this.blockStyles.push(this.getStyleForBlock(b, i));
+            }
+          });
 
           this.chainTip = Math.max(this.chainTip, block.height);
           this.cd.markForCheck();
@@ -155,7 +157,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (this.static) {
-      const animateSlide = !!changes.dynamicBlockCount || (changes.height && (changes.height.currentValue === changes.height.previousValue + 1));
+      const animateSlide = (changes.dynamicBlockCount && changes.dynamicBlockCount.previousValue != null) || (changes.height && (changes.height.currentValue === changes.height.previousValue + 1));
       this.updateStaticBlocks(animateSlide);
     }
   }
@@ -222,8 +224,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
         block = this.cacheService.getCachedBlock(height) || null;
       }
       this.blocks.push(block || {
-        placeholder: height < 0,
+        placeholder: !isNaN(height) && height < 0,
-        loading: height >= 0,
+        loading: isNaN(height) || height >= 0,
         id: '',
         height,
         version: 0,
@@ -306,6 +308,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     return {
       left: addLeft + (155 * index) + 'px',
       background: "#2d3348",
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
     };
   }
 
@@ -313,6 +316,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     const addLeft = animateEnterFrom || 0;
     return {
       left: addLeft + (155 * index) + 'px',
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
     };
   }
 
@@ -321,6 +325,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
     return {
       left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
       background: "#2d3348",
     };
   }

frontend/src/app/components/start/start.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild } fro
 import { Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
+import { BlockExtended } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-start',
@@ -29,7 +30,8 @@ export class StartComponent implements OnInit, OnDestroy {
   isMobile: boolean = false;
   isiOS: boolean = false;
   blockWidth = 155;
-  dynamicBlocksAmount: number = 0;
+  blocks: BlockExtended[] = [];
+  dynamicBlocksAmount: number;
   blockCount: number = 0;
   blocksPerPage: number = 1;
   pageWidth: number;
@@ -49,15 +51,28 @@ export class StartComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
+    this.firstPageWidth = 40 + (this.blockWidth * (this.dynamicBlocksAmount || 0));
-    this.blockCounterSubscription = this.stateService.blocks$.subscribe(() => {
+
-      this.blockCount++;
+    this.blockCounterSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed, batch]) => {
-      this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
+      if (this.blocks.some((b) => b.height === block.height)) {
+        return;
+      }
+
+      if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
+        this.blocks = [];
+      }
+
+      this.blocks.unshift(block);
+      this.blocks = this.blocks.slice(0, Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT));
+
+      this.dynamicBlocksAmount = this.blocks.length;
       this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
-      if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
+
+      if (this.blocks.length <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
         this.onResize();
       }
     });
+
     this.onResize();
     this.updatePages();
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {