Fix Staking DApp first loading

CHANGELOG.md

@@ -6,6 +6,7 @@
 - [#3462](https://github.com/poanetwork/blockscout/pull/3462) - Display price for bridged tokens
 
 ### Fixes
+- [#3505](https://github.com/poanetwork/blockscout/pull/3505) - Fix Staking DApp first loading
 - [#3433](https://github.com/poanetwork/blockscout/pull/3433) - Token balances and rewards tables deadlocks elimination
 - [#3494](https://github.com/poanetwork/blockscout/pull/3494), [#3497](https://github.com/poanetwork/blockscout/pull/3497), [#3504](https://github.com/poanetwork/blockscout/pull/3504) - Contracts interaction: fix method call with array[] input
 - [#3494](https://github.com/poanetwork/blockscout/pull/3494), [#3495](https://github.com/poanetwork/blockscout/pull/3495) - Contracts interaction: fix tuple output display

apps/block_scout_web/assets/js/lib/async_listing_load.js

@@ -25,6 +25,9 @@ import '../app'
  *
  *   the data-async-load is the attribute responsible for binding the store.
  *
+ *   data-no-first-loading attribute can also be used along with data-async-load
+ *   to prevent loading items for the first time
+ *
  * If the page has a redux associated with, you need to connect the reducers instead of creating
  * the store using the `createStore`. For instance:
  *
@@ -39,6 +42,8 @@ import '../app'
  *
  */
 
+var enableFirstLoading = true
+
 export const asyncInitialState = {
   /* it will consider any query param in the current URI as paging */
   beyondPageOne: (URI(window.location).query() !== ''),
@@ -310,7 +315,10 @@ function firstPageLoad (store) {
   function loadItemsPrev () {
     loadPage(store, store.getState().prevPagePath)
   }
-  loadItemsNext()
+
+  if (enableFirstLoading) {
+    loadItemsNext()
+  }
 
   $element.on('click', '[data-error-message]', (event) => {
     event.preventDefault()
@@ -334,7 +342,12 @@ function firstPageLoad (store) {
 
 const $element = $('[data-async-load]')
 if ($element.length) {
-  const store = createStore(asyncReducer)
+  if (Object.prototype.hasOwnProperty.call($element.data(), 'noFirstLoading')) {
-  connectElements({ store, elements })
+    enableFirstLoading = false
-  firstPageLoad(store)
+  }
+  if (enableFirstLoading) {
+    const store = createStore(asyncReducer)
+    connectElements({ store, elements })
+    firstPageLoad(store)
+  }
 }

apps/block_scout_web/assets/js/pages/stakes.js

@@ -29,6 +29,7 @@ export const initialState = {
   currentBlockNumber: 0, // current block number
   finishRequestResolve: null,
   lastEpochNumber: 0,
+  loading: true,
   network: null,
   refreshBlockNumber: 0, // last page refresh block number
   refreshInterval: null,

apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex

@@ -2,7 +2,7 @@
   <%= raw(@top) %>
 </div>
 <section data-page="stakes" class="container" data-refresh-interval="<%= @refresh_interval %>">
-  <div class="card" data-async-load data-async-listing="<%= @current_path %>">
+  <div class="card" data-async-load data-async-listing="<%= @current_path %>" data-no-first-loading>
     <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>
 
     <%=