From b6b90014068a31db37eb644317f5b315a62b785e Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 23 Jul 2020 10:53:42 +0700
Subject: [PATCH] Display empty mempool instead of no mempool blocks at all.

---
 .../mempool-blocks/mempool-blocks.component.html       |  5 +++--
 .../mempool-blocks/mempool-blocks.component.scss       | 10 ++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 43cdb9b9f..c1ef935a6 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -1,6 +1,6 @@
 <div class="mempool-blocks-container">
   <div class="flashing">
-    <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
+    <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
       <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
         <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
         <div class="block-body" *ngIf="mempoolBlocks?.length">
@@ -26,7 +26,8 @@
         </div>
         <span class="animated-border"></span>
       </div>
-    </div>
+    </ng-template>
+    <div *ngIf="mempoolBlocks?.length === 0" class="bitcoin-block mempool-block empty-block">Mempool is empty</div>
   </div>
   <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
 </div>
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index 98675d7b7..53e78155f 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -116,3 +116,13 @@
   left: 0;
   z-index: 10;
 }
+
+.empty-block {
+  width: 125px;
+  height: 125px;
+
+  right: 40px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}