From 6bfa17c3576d46e367c83225e96d952a5ada5cbc Mon Sep 17 00:00:00 2001
From: Eduard Sachava <liberumed@gmail.com>
Date: Tue, 24 Sep 2019 13:03:27 +0300
Subject: [PATCH] Fix issues in Staking DApp related to pool filters (#2730)

* Fix disappearing pagination on pools filter toggle

* Wrap stakes table items in container to set minimum heigh

* Reduce flickering of content on changing pools table height
---
 .../assets/css/components/_card.scss              |  2 ++
 .../assets/css/components/_stakes_table.scss      |  4 ++++
 .../components/stakes/_stakes_empty_content.scss  |  2 +-
 .../assets/js/lib/async_listing_load.js           |  8 ++++++--
 .../templates/stakes/_table.html.eex              | 15 ++++++++-------
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
index c0503a91d9..92b1fc0ac2 100644
--- a/apps/block_scout_web/assets/css/components/_card.scss
+++ b/apps/block_scout_web/assets/css/components/_card.scss
@@ -118,6 +118,7 @@ $card-tab-icon-color-active: #fff !default;
   padding: 0px $card-horizontal-padding;
   display: flex;
   justify-content: flex-end;
+  min-height: 54px;
 }
 
 .card-footer-paging {
@@ -125,6 +126,7 @@ $card-tab-icon-color-active: #fff !default;
   padding-bottom: 25px;
   display: flex;
   justify-content: flex-end;
+  min-height: 80px;
 }
 
 .card-title-controls {
diff --git a/apps/block_scout_web/assets/css/components/_stakes_table.scss b/apps/block_scout_web/assets/css/components/_stakes_table.scss
index ee59a0685f..da97a43e39 100644
--- a/apps/block_scout_web/assets/css/components/_stakes_table.scss
+++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss
@@ -69,6 +69,10 @@ $stakes-link-color: $primary !default;
   width: 100%;
 }
 
+.stakes-table-body {
+  min-height: 311px;
+}
+
 .stakes-table-th {
   background-color: $stakes-table-th-background;
   color: #a3a9b5;
diff --git a/apps/block_scout_web/assets/css/components/stakes/_stakes_empty_content.scss b/apps/block_scout_web/assets/css/components/stakes/_stakes_empty_content.scss
index fc850f6770..981529dd27 100644
--- a/apps/block_scout_web/assets/css/components/stakes/_stakes_empty_content.scss
+++ b/apps/block_scout_web/assets/css/components/stakes/_stakes_empty_content.scss
@@ -1,7 +1,7 @@
 .stakes-empty-content {
   display: flex;
   justify-content: center;
-  padding: 100px 15px;
+  padding: 100px 15px 20px;
 }
 
 .stakes-empty-content-pic {
diff --git a/apps/block_scout_web/assets/js/lib/async_listing_load.js b/apps/block_scout_web/assets/js/lib/async_listing_load.js
index 8785273122..49fb6c3e4c 100644
--- a/apps/block_scout_web/assets/js/lib/async_listing_load.js
+++ b/apps/block_scout_web/assets/js/lib/async_listing_load.js
@@ -185,6 +185,7 @@ export const elements = {
         return $el.hide()
       }
 
+      $el.show()
       if (state.requestError || !state.nextPagePath || state.loading) {
         return $el.attr('disabled', 'disabled')
       }
@@ -199,6 +200,7 @@ export const elements = {
         return $el.hide()
       }
 
+      $el.show()
       if (state.requestError || !state.prevPagePath || state.loading) {
         return $el.attr('disabled', 'disabled')
       }
@@ -212,13 +214,14 @@ export const elements = {
       if (state.pagesStack.length === 0) {
         return $el.hide()
       }
-      $el.show()
-      $el.attr('disabled', false)
 
       const urlParams = new URLSearchParams(window.location.search)
       const blockParam = urlParams.get('block_type')
       const firstPageHref = window.location.href.split('?')[0]
 
+      $el.show()
+      $el.attr('disabled', false)
+
       if (blockParam !== null) {
         $el.attr('href', firstPageHref + '?block_type=' + blockParam)
       } else {
@@ -232,6 +235,7 @@ export const elements = {
         return $el.hide()
       }
 
+      $el.show()
       if (state.pagesStack.length === 0) {
         return $el.text('Page 1')
       }
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_table.html.eex
index a6f34ec0bd..ee6c7a90d5 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_table.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_table.html.eex
@@ -19,14 +19,15 @@
     </div>
     <div class="col-3"></div>
   </div>
+  <div class="stakes-table-body">
+    <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
+      <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
+    </button>
 
-  <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
-    <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
-  </button>
+    <div data-empty-response-message style="display: none;">
+      <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %>
+    </div>
 
-  <div data-empty-response-message style="display: none;">
-    <%= render BlockScoutWeb.StakesView, "_stakes_empty_content.html" %>
+    <div data-items></div>
   </div>
-
-  <div data-items></div>
 </div>