Don't fully animate when tab is deactivated.

refs #47

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

@@ -17,6 +17,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   blocksSubscription: Subscription;
   blockStyles = [];
   interval: any;
+  tabHidden = true;
 
   arrowVisible = false;
   arrowLeftPx = 30;
@@ -37,6 +38,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
 
     this.blocksSubscription = this.stateService.blocks$
       .subscribe(([block, txConfirmed, refilling]) => {
@@ -46,7 +48,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         this.blocks.unshift(block);
         this.blocks = this.blocks.slice(0, 8);
 
-        if (!refilling) {
+        if (!refilling && !this.tabHidden) {
           // setTimeout(() => this.audioService.playSound('bright-harmony'));
           block.stage = block.matchRate >= 80 ? 1 : 2;
         }

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

@@ -21,6 +21,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   blockWidth = 125;
   blockPadding = 30;
   arrowVisible = false;
+  tabHidden = true;
 
   rightPosition = 0;
   transition = '2s';
@@ -38,6 +39,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
+
     this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
       .subscribe((blocks) => {
         blocks.forEach((block, i) => {
@@ -65,7 +68,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
 
     this.stateService.blocks$
       .subscribe(([block]) => {
-        if (block.matchRate >= 80) {
+        if (block.matchRate >= 80 && !this.tabHidden) {
           this.blockIndex++;
         }
       });