improve block scrolling & new block animation

2022-12-27 11:33:08 -06:00
parent 7be3ed416e
commit 32bf30872d
6 changed files with 180 additions and 114 deletions
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -1,6 +1,6 @@
 <div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [style.left]="static ? (offset || 0) + 'px' : null" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
-  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-    <ng-container *ngIf="block && !block.loading; else loadingBlock">
+  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
+    <ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
        <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
          class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
@@ -11,8 +11,11 @@
          <div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
          </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span">
-            {{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="block?.extras?.feeRange">
+            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="!block?.extras?.feeRange">
+            &nbsp;
          </div>
          <div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
            <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
@@ -31,16 +34,19 @@
        </div>
      </div>
    </ng-container>
+    <ng-template #placeholderBlock>
+      <ng-container *ngIf="block && block.placeholder; else loadingBlock">
+        <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
+ 
+        </div>
+      </ng-container>
+    </ng-template>
    <ng-template #loadingBlock>
-      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-        <span draggable="false" class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</span>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
-          <span>{{ block.height }}</span>
+      <ng-container *ngIf="block && block.loading">
+        <div class="flashing">
+          <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
        </div>
-        <div class="block-body">
-          loading
-        </div>
-      </div>
+      </ng-container>
    </ng-template>
  </div>
 <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -25,6 +25,10 @@
  transition: background 2s, left 2s, transform 1s;
 }

+.mined-block.placeholder-block {
+  background: none !important;
+}
+
 .block-size {
  font-size: 16px;
  font-weight: bold;
@@ -96,6 +100,16 @@
  transform-origin: top;
 }

+.bitcoin-block.placeholder-block::after {
+  content: none;
+  background: 0;
+}
+
+.bitcoin-block.placeholder-block::before {
+  content: none;
+  background: 0;
+}
+
 .black-background {
  background-color: #11131f;
  z-index: 100;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -8,6 +8,7 @@ import { config } from 'process';
 import { CacheService } from 'src/app/services/cache.service';

 interface BlockchainBlock extends BlockExtended {
+  placeholder?: boolean;
  loading?: boolean;
 }

@@ -102,10 +103,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
          this.blocks.unshift(block);
          this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);

-          if (this.blocksFilled && !this.tabHidden && block.extras) {
-            block.extras.stage = block.extras.matchRate >= 66 ? 1 : 2;
-          }
-
          if (txConfirmed) {
            this.markHeight = block.height;
            this.moveArrowToPosition(true, true);
@@ -114,12 +111,16 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
          }

          this.blockStyles = [];
-          this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
-          setTimeout(() => {
-            this.blockStyles = [];
+          if (this.blocksFilled) {
+            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
+            setTimeout(() => {
+              this.blockStyles = [];
+              this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+              this.cd.markForCheck();
+            }, 50);
+          } else {
            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
-            this.cd.markForCheck();
-          }, 50);
+          }

          if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
            this.blocksFilled = true;
@@ -210,31 +211,34 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    // reset blocks
    this.blocks = [];
    this.blockStyles = [];
-    while (this.blocks.length < Math.min(this.height + 1, this.count)) {
+    while (this.blocks.length < this.count) {
      const height = this.height - this.blocks.length;
+      let block;
      if (height >= 0) {
        this.cacheService.loadBlock(height);
-        const block = this.cacheService.getCachedBlock(height) || null;
-        this.blocks.push(block || {
-          loading: true,
-          id: '',
-          height,
-          version: 0,
-          timestamp: 0,
-          bits: 0,
-          nonce: 0,
-          difficulty: 0,
-          merkle_root: '',
-          tx_count: 0,
-          size: 0,
-          weight: 0,
-          previousblockhash: '',
-        });
+        block = this.cacheService.getCachedBlock(height) || null;
      }
+      this.blocks.push(block || {
+        placeholder: height < 0,
+        loading: height >= 0,
+        id: '',
+        height,
+        version: 0,
+        timestamp: 0,
+        bits: 0,
+        nonce: 0,
+        difficulty: 0,
+        merkle_root: '',
+        tx_count: 0,
+        size: 0,
+        weight: 0,
+        previousblockhash: '',
+      });
    }
    this.blocks = this.blocks.slice(0, this.count);
    this.blockStyles = [];
-    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide)));
+    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
+    this.cd.markForCheck();
    if (animateSlide) {
      // animate blocks slide right
      setTimeout(() => {
@@ -242,6 +246,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
        this.cd.markForCheck();
      }, 50);
+      this.moveArrowToPosition(true, true);
+    } else {
+      this.moveArrowToPosition(false, false);
    }
  }

@@ -254,18 +261,17 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    this.cd.markForCheck();
  }

-  getStyleForBlock(block: BlockchainBlock, index: number, animateSlideStart: boolean = false) {
-    if (!block || block.loading) {
-      return this.getStyleForLoadingBlock(index, animateSlideStart);
+  getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
+    if (!block || block.placeholder) {
+      return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
+    } else if (block.loading) {
+      return this.getStyleForLoadingBlock(index, animateEnterFrom);
    }
    const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
    let addLeft = 0;

-    if (animateSlideStart) {
-      if (block?.extras) {
-        block.extras.stage = 2;
-      }
-      addLeft = -205;
+    if (animateEnterFrom) {
+      addLeft = animateEnterFrom || 0;
    }

    return {
@@ -276,11 +282,12 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[this.network][1]} 100%
      )`,
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
    };
  }

-  getStyleForLoadingBlock(index: number, animateSlideStart: boolean = false) {
-    const addLeft = animateSlideStart ? -205 : 0;
+  getStyleForLoadingBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;

    return {
      left: addLeft + (155 * index) + 'px',
@@ -288,13 +295,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    };
  }

-  getStyleForEmptyBlock(block: BlockExtended) {
-    let addLeft = 0;
+  getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;
+    return {
+      left: addLeft + (155 * index) + 'px',
+    };
+  }

-    if (block?.extras?.stage === 1) {
-      block.extras.stage = 2;
-      addLeft = -205;
-    }
+  getStyleForEmptyBlock(block: BlockExtended, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;

    return {
      left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
@@ -319,7 +328,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        weight: 0,
        previousblockhash: '',
        matchRate: 0,
-        stage: 0,
      });
    }
    return emptyBlocks;