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

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 {

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;

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 {

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')
       }

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>