Replacing setTimeouts with rxjs

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, delay, filter, tap } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 import { BlockExtended } from '../../interfaces/node-api.interface';
@@ -85,10 +85,33 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
     this.blockDisplayMode = this.stateService.blockDisplayMode$.value as 'size' | 'fees';
-    this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$.subscribe((mode: 'size' | 'fees') => {
+    this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$
-      if (mode !== this.blockDisplayMode) {
+    .pipe(
-        this.applyAnimation(mode);
+      filter((mode: 'size' | 'fees') => mode !== this.blockDisplayMode),
-      }
+      tap(() => {
+        this.blockTransformation = this.timeLtr ? {
+          transform: 'scaleX(-1) rotateX(90deg)',
+          transition: 'transform 0.375s'
+        } : {
+          transform: 'rotateX(90deg)',
+          transition: 'transform 0.375s'
+        };
+      }),
+      delay(375),
+      tap((mode) => {
+        this.blockDisplayMode = mode;
+        this.blockTransformation = this.timeLtr ? {
+          transform: 'scaleX(-1)',
+          transition: 'transform 0.375s'
+        } : {
+          transition: 'transform 0.375s'
+        };
+        this.cd.markForCheck();
+      }),
+      delay(375),
+    )
+    .subscribe(() => {
+      this.blockTransformation = {};
     });
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -240,29 +263,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  applyAnimation(mode: 'size' | 'fees') {
-    this.blockTransformation = this.timeLtr ? {
-      transform: 'scaleX(-1) rotateX(90deg)',
-      transition: 'transform 0.375s'
-    } : {
-      transform: 'rotateX(90deg)',
-      transition: 'transform 0.375s'
-    };
-    setTimeout(() => {
-      this.blockDisplayMode = mode;
-      this.blockTransformation = this.timeLtr ? {
-        transform: 'scaleX(-1)',
-        transition: 'transform 0.375s'
-      } : {
-        transition: 'transform 0.375s'
-      };
-      this.cd.markForCheck();
-      setTimeout(() => {
-        this.blockTransformation = {};
-      }, 375);
-    }, 375);
-  }
-
   trackByBlocksFn(index: number, item: BlockchainBlock) {
     return item.height;
   }

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

@@ -1,9 +1,9 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
-import { Subscription, Observable, of, combineLatest, BehaviorSubject } from 'rxjs';
+import { Subscription, Observable, of, combineLatest } from 'rxjs';
 import { MempoolBlock } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
 import { Router } from '@angular/router';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { delay, filter, map, switchMap, tap } from 'rxjs/operators';
 import { feeLevels } from '../../app.constants';
 import { specialBlocks } from '../../app.constants';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -103,10 +103,27 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.widthChange.emit(this.mempoolWidth);
 
     this.blockDisplayMode = this.stateService.blockDisplayMode$.value as 'size' | 'fees';
-    this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$.subscribe((mode: 'size' | 'fees') => {
+    this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$
-      if (mode !== this.blockDisplayMode) {
+      .pipe(
-        this.applyAnimation(mode);
+        filter((mode: 'size' | 'fees') => mode !== this.blockDisplayMode),
-      }
+        tap(() => {
+          this.blockTransformation = {
+            transform: 'rotateX(90deg)',
+            transition: 'transform 0.375s'
+          };
+        }),
+        delay(375),
+        tap((mode) => {
+          this.blockDisplayMode = mode;
+          this.blockTransformation = {
+            transition: 'transform 0.375s'
+          };
+          this.cd.markForCheck();
+        }),
+        delay(375),
+      )
+      .subscribe(() => {
+        this.blockTransformation = {};
       });
 
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@@ -452,23 +469,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
   }
 
-  applyAnimation(mode: 'size' | 'fees') {
-    this.blockTransformation = {
-      transform: 'rotateX(90deg)',
-      transition: 'transform 0.375s'
-    };
-    setTimeout(() => {
-      this.blockDisplayMode = mode;
-      this.blockTransformation = {
-        transition: 'transform 0.375s'
-      };
-      this.cd.markForCheck();
-      setTimeout(() => {
-        this.blockTransformation = {};
-      }, 375);
-    }, 375);
-  }
-
   mountEmptyBlocks() {
     const emptyBlocks = [];
     const numberOfBlocks = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;