Reversible blockchain components

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

@@ -1,5 +1,5 @@
 <ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
-  <div class="mempool-blocks-container" *ngIf="(difficultyAdjustments$ | async) as da;">
+  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
     <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
         <div [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
@@ -45,7 +45,7 @@
 </ng-container>
 
 <ng-template #loadingBlocks>
-  <div class="mempool-blocks-container">
+  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr">
     <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
         <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -1,7 +1,7 @@
 .bitcoin-block {
   width: 125px;
   height: 125px;
-  transition: 2s;
+  transition: background 2s, right 2s, transform 1s;
 }
 
 .block-size {
@@ -33,6 +33,7 @@
 
 .block-body {
   text-align: center;
+  transition: transform 1s;
 }
 
 @keyframes opacityPulse {
@@ -73,6 +74,7 @@
   background-color: #232838;
   transform:skew(40deg);
   transform-origin:top;
+  transition: transform 1s, left 1s;
 }
 
 .bitcoin-block::before {
@@ -83,9 +85,11 @@
   top: -12px;
   left: -20px;
   background-color: #191c27;
+  z-index: -1;
 
   transform: skewY(50deg);
   transform-origin: top;
+  transition: transform 1s, left 1s;
 }
 
 .mempool-block.bitcoin-block::after {
@@ -128,3 +132,18 @@
 .blockLink:hover {
   text-decoration: none;
 }
+
+.time-ltr {
+  .bitcoin-block::after {
+    transform: skew(-40deg);
+    left: 20px;
+  }
+
+  .bitcoin-block::before {
+    transform: skewY(-50deg);
+    left: 125px;
+  }
+  .block-body {
+    transform: scaleX(-1);
+  }
+}

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

@@ -46,7 +46,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   feeRounding = '1.0-0';
 
   rightPosition = 0;
-  transition = '2s';
+  transition = 'background 2s, right 2s, transform 1s';
 
   markIndex: number;
   txFeePerVSize: number;
@@ -76,6 +76,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
+      this.cd.markForCheck();
     });
 
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
@@ -278,7 +279,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
       this.arrowVisible = true;
 
       this.resetTransitionTimeout = window.setTimeout(() => {
-        this.transition = '2s';
+        this.transition = 'background 2s, right 2s, transform 1s';
         this.cd.markForCheck();
       }, 100);
       return;