Merge pull request #1974 from poanetwork/ab-pagination

pagination and navigation

CHANGELOG.md

@@ -29,6 +29,7 @@
 - [#1952](https://github.com/poanetwork/blockscout/pull/1952) - feat: exclude empty contracts by default
 - [#1989](https://github.com/poanetwork/blockscout/pull/1989) - fix: consolidate address w/ balance one at a time
 - [#1954](https://github.com/poanetwork/blockscout/pull/1954) - feat: use creation init on self destruct
+- [#1974](https://github.com/poanetwork/blockscout/pull/1974) - feat: previous page button logic
 - [#1999](https://github.com/poanetwork/blockscout/pull/1999) - load data async on addresses page
 - [#2002](https://github.com/poanetwork/blockscout/pull/2002) - Get estimated count of blocks when cache is empty
 

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

@@ -51,7 +51,11 @@ export const asyncInitialState = {
   /* if it is loading the first page */
   loadingFirstPage: true,
   /* link to the next page */
-  nextPagePath: null
+  nextPagePath: null,
+  /* link to the previous page */
+  prevPagePath: null,
+  /* visited pages */
+  pagesStack: []
 }
 
 export function asyncReducer (state = asyncInitialState, action) {
@@ -78,15 +82,35 @@ export function asyncReducer (state = asyncInitialState, action) {
       })
     }
     case 'ITEMS_FETCHED': {
+      var prevPagePath = null
+
+      if (state.pagesStack.length >= 2) {
+        prevPagePath = state.pagesStack[state.pagesStack.length - 2]
+      }
+
       return Object.assign({}, state, {
         requestError: false,
         items: action.items,
-        nextPagePath: action.nextPagePath
+        nextPagePath: action.nextPagePath,
+        prevPagePath: prevPagePath
       })
     }
     case 'NAVIGATE_TO_OLDER': {
       history.replaceState({}, null, state.nextPagePath)
 
+      if (state.pagesStack.length === 0) {
+        state.pagesStack.push(window.location.href.split('?')[0])
+      }
+
+      state.pagesStack.push(state.nextPagePath)
+
+      return Object.assign({}, state, { beyondPageOne: true })
+    }
+    case 'NAVIGATE_TO_NEWER': {
+      history.replaceState({}, null, state.prevPagePath)
+
+      state.pagesStack.pop()
+
       return Object.assign({}, state, { beyondPageOne: true })
     }
     default:
@@ -153,6 +177,25 @@ export const elements = {
       $el.attr('href', state.nextPagePath)
     }
   },
+  '[data-async-listing] [data-prev-page-button]': {
+    render ($el, state) {
+      if (state.requestError || !state.prevPagePath || state.loading) {
+        return $el.attr('disabled', 'disabled')
+      }
+
+      $el.attr('disabled', false)
+      $el.attr('href', state.prevPagePath)
+    }
+  },
+  '[data-async-listing] [data-page-number]': {
+    render ($el, state) {
+      if (state.pagesStack.length === 0) {
+        return $el.text('Page 1')
+      }
+
+      $el.text('Page ' + state.pagesStack.length)
+    }
+  },
   '[data-async-listing] [data-loading-button]': {
     render ($el, state) {
       if (!state.loadingFirstPage && state.loading) return $el.show()
@@ -193,7 +236,7 @@ export function createAsyncLoadStore (reducer, initialState, itemKey) {
 
 function firstPageLoad (store) {
   const $element = $('[data-async-listing]')
-  function loadItems () {
+  function loadItemsNext () {
     const path = store.getState().nextPagePath
     store.dispatch({type: 'START_REQUEST'})
     $.getJSON(path, {type: 'JSON'})
@@ -201,18 +244,33 @@ function firstPageLoad (store) {
       .fail(() => store.dispatch({type: 'REQUEST_ERROR'}))
       .always(() => store.dispatch({type: 'FINISH_REQUEST'}))
   }
-  loadItems()
+
+  function loadItemsPrev () {
+    const path = store.getState().prevPagePath
+    store.dispatch({type: 'START_REQUEST'})
+    $.getJSON(path, {type: 'JSON'})
+      .done(response => store.dispatch(Object.assign({type: 'ITEMS_FETCHED'}, humps.camelizeKeys(response))))
+      .fail(() => store.dispatch({type: 'REQUEST_ERROR'}))
+      .always(() => store.dispatch({type: 'FINISH_REQUEST'}))
+  }
+  loadItemsNext()
 
   $element.on('click', '[data-error-message]', (event) => {
     event.preventDefault()
-    loadItems()
+    loadItemsNext()
   })
 
   $element.on('click', '[data-next-page-button]', (event) => {
     event.preventDefault()
-    loadItems()
+    loadItemsNext()
     store.dispatch({type: 'NAVIGATE_TO_OLDER'})
   })
+
+  $element.on('click', '[data-prev-page-button]', (event) => {
+    event.preventDefault()
+    loadItemsPrev()
+    store.dispatch({type: 'NAVIGATE_TO_NEWER'})
+  })
 }
 
 const $element = $('[data-async-load]')

apps/block_scout_web/lib/block_scout_web/controllers/pagination_helpers.ex

@@ -0,0 +1,20 @@
+defmodule BlockScoutWeb.PaginationHelpers do
+  @moduledoc """
+    Common pagination logic helpers.
+  """
+
+  def current_page_number(params) do
+    cond do
+      !params["prev_page_number"] -> 1
+      params["next_page"] -> String.to_integer(params["prev_page_number"]) + 1
+      params["prev_page"] -> String.to_integer(params["prev_page_number"]) - 1
+    end
+  end
+
+  def add_navigation_params(params, current_page_path, current_page_number) do
+    params
+    |> Map.put("prev_page_path", current_page_path)
+    |> Map.put("next_page", true)
+    |> Map.put("prev_page_number", current_page_number)
+  end
+end

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

@@ -7,14 +7,6 @@
 
       <div data-items data-selector="top-addresses-list"></div>
 
-      <div data-loading-message class="tile tile-muted text-center mt-3" style="display: none;">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
-      </div>
-
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
     </div>
   </div>

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

@@ -28,7 +28,7 @@
           <canvas data-chart="coinBalanceHistoryChart" data-coin_balance_history_data_path="<%= address_coin_balance_by_day_path(@conn, :index, @address) %>" width="350" height="152"></canvas>
         </div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
         <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>
@@ -40,31 +40,10 @@
           </div>
         </div>
 
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading balances") %>...
-        </div>
-
         <div data-selector="coin-balances-list" data-items></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-        <!--
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
-
-        <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-      </div>
     </div>
   </section>
 </section>

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

@@ -55,7 +55,7 @@
           </div>
         </div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
         <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>
@@ -65,30 +65,11 @@
             <span data-selector="empty-internal-transactions-list"><%= gettext "There are no internal transactions for this address." %></span>
           </div>
         </div>
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
-        <div data-items></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <div data-items></div>
 
-        <!--
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
 
-        <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
       </div>
     </div>
   </section>

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

@@ -9,15 +9,7 @@
           <span class="text-muted"><%= gettext "Tokens" %></span> / <%= token_name(@token) %>
         </h2>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading...") %>
-        </div>
 
         <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span><%= gettext "There are no token transfers for this address." %></span>
@@ -31,21 +23,8 @@
 
         <div data-items></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-        <!--
-        <a data-next-page-button href="#" class="button button-secondary button-small float-right mt-4" style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
-
-        <div data-loading-button class="button button-secondary button-small float-right mt-4" style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
       </div>
     </div>
   </section>

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

@@ -51,7 +51,7 @@
           </div>
         </div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
         <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>
@@ -63,31 +63,10 @@
           </div>
         </div>
 
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
-
         <div data-items></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-        <!--
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
-
-        <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
       </div>
     </div>
   </section>

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

@@ -12,15 +12,8 @@
         </div>
         <h2 class="card-title"><%=gettext("Blocks Validated")%></h2>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading...") %>
-        </div>
         <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span><%= gettext "There are no blocks validated by this address." %></span>
         </div>
@@ -31,21 +24,8 @@
         </button>
         <div data-items data-selector="validations-list"></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-
-        <!--
-        <a data-next-page-button href="#" class="button button-secondary button-small float-right mt-4" style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
 
-        <div data-loading-button class="button button-secondary button-small float-right mt-4" style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading...") %>
-        </div>
       </div> <!-- Card Body -->
     </div> <!-- Card -->
   <section>

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

@@ -9,35 +9,14 @@
 
       <h1 class="card-title"><%= gettext("%{block_type}s", block_type: @block_type) %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <div data-loading-message class="tile tile-muted text-center mt-3">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
-      </div>
       <div data-items></div>
       <div data-empty-response-message style="display: none;">
           <span><%= gettext "There are no blocks." %></span>
       </div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-
-      <!--
-      <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-        <%= gettext("Older") %>
-      </a>
-      -->
-
-      <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
-      </div>
 
     </div>
   </div>

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

@@ -44,19 +44,6 @@
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
         <% end %>
 
-        <!--
-        <%= if @next_page_params do %>
-          <%= link(
-            gettext("Older"),
-            class: "button button-secondary button-sm float-right mt-3",
-            to: transaction_path(
-              @conn,
-              :index,
-              @next_page_params
-            )
-          ) %>
-        <% end %>
-        -->
       </div>
     </div>
   </section>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex

@@ -1,5 +1,5 @@
 <div class='pagination-container <%= if assigns[:position] == "top" do %>position-top<% end %> <%= if assigns[:position] == "bottom" do %>position-bottom<% end %>'>
-    <%= if assigns[:show_pagination_limit] do %>
+    <%= if false do %>
     <!-- Pagination limit -->
     <div class="pagination-limit">
         <%= gettext "Show" %>
@@ -14,6 +14,7 @@
     <!-- Pagination -->
     <ul class="pagination">
         <!-- First -->
+        <%= if assigns[:first_page_path] do %>
           <li class="page-item">
               <a
                   <%= if !assigns[:first_page_path] do %>disabled<% end %>
@@ -21,12 +22,14 @@
                   href='<%= "#{assigns[:first_page_path]}" %>'
               >First</a>
           </li>
+        <% end %>
         <!-- Previous -->
         <li class="page-item">
             <a
                 <%= if !assigns[:prev_page_path] do %>disabled<% end %>
                 class="page-link"
                 href='<%= "#{assigns[:prev_page_path]}" %>'
+                <%= if assigns[:data_prev_page_button] do %>data-prev-page-button<% end %>
             >
                 <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10">
                     <path fill-rule="evenodd" d="M2.358 5l3.357 3.358a.959.959 0 1 1-1.357 1.357L.502 5.859c-.076-.042-.153-.08-.217-.144A.949.949 0 0 1 .011 5a.949.949 0 0 1 .274-.715c.064-.064.142-.102.217-.145L4.358.285a.959.959 0 1 1 1.357 1.357L2.358 5z"/>
@@ -34,7 +37,7 @@
             </a>
         </li>
         <!-- Page X of XX -->
-        <li class="page-item"><a class="page-link no-hover" href><%= gettext "Page" %> <%= assigns[:cur_page_number] || "" %> <% if assigns[:total_pages_number] do %> <%= gettext "of" %> <%= assigns[:total_pages_number] || "undefined" %><% end %></a></li>
+        <li class="page-item"><a class="page-link no-hover" href data-page-number><%= gettext "Page" %> <%= assigns[:cur_page_number] || "" %> <% if assigns[:total_pages_number] do %> <%= gettext "of" %> <%= assigns[:total_pages_number] || "undefined" %><% end %></a></li>
         <!-- Next -->
         <li class="page-item">
             <a
@@ -49,6 +52,7 @@
             </a>
         </li>
         <!-- Last -->
+        <%= if assigns[:last_page_path] do %>
         <li class="page-item">
             <a
                 <%= if !assigns[:last_page_path] do %>disabled<% end %>
@@ -56,5 +60,6 @@
                 href='<%= "#{assigns[:last_page_path]}" %>'
             >Last</a>
         </li>
+        <% end %>
     </ul>
 </div>

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

@@ -3,7 +3,7 @@
     <div class="card-body" data-async-listing="<%= @current_path %>">
       <h1 class="card-title"><%= gettext "Pending Transactions" %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">
@@ -32,22 +32,8 @@
         <%= gettext("Loading") %>...
       </div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <!--
-      <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-        <%= gettext("Older") %>
-      </a>
-      -->
-
-      <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
     </div>
   </div>
-
-  </div>
 </section>

apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex

@@ -15,6 +15,8 @@
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Holders" %></h2>
 
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+
         <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>
@@ -25,24 +27,11 @@
             </span>
           </div>
         </div>
-        <div data-loading-message class="tile tile-muted text-center mt-3">
+
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
         <div data-items></div>
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
+
-          <%= gettext("Next Page") %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-        </a>
+
-        <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
       </div>
     </div>
   </section>

apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex

@@ -14,7 +14,7 @@
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
         <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>
@@ -26,31 +26,10 @@
           </span>
         </div>
 
-        <div data-loading-message class="tile tile-muted text-center mt-3">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
-
         <div data-items></div>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-        <!--
-        <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
-          <%= gettext("Older") %>
-        </a>
-        -->
-
-        <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading") %>...
-        </div>
       </div>
     </div>
   </section>

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

@@ -3,7 +3,7 @@
     <div class="card-body" data-async-listing="<%= @current_path %>">
       <h1 class="card-title"><%= gettext "Validated Transactions" %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
@@ -28,30 +28,9 @@
         </div>
       </div>
 
-      <div data-loading-message class="tile tile-muted text-center mt-3">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
-      </div>
-
       <div data-selector="transactions-list" data-items></div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <!--
-      <a href="#" data-next-page-button class="button button-secondary button-small float-right mt-4" style="display: none;">
-        <%= gettext("Older") %>
-      </a>
-      -->
-
-      <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
-      </div>
   </div>
 </section>

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

@@ -32,20 +32,6 @@
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
       <% end %>
 
-      <!--
-      <%= if @next_page_params do %>
-        <%= link(
-          gettext("Older"),
-          class: "button button-secondary button-sm u-float-left mt-3",
-          to: transaction_token_transfer_path(
-            @conn,
-            :index,
-            @transaction,
-            @next_page_params
-          )
-        ) %>
-      <% end %>
-      -->
     </div>
   </div>
 </section>

apps/block_scout_web/priv/gettext/default.pot

@@ -582,7 +582,6 @@ msgid "Next"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:37
 #: lib/block_scout_web/templates/tokens/inventory/index.html.eex:32
 msgid "Next Page"
 msgstr ""
@@ -604,21 +603,6 @@ msgstr ""
 msgid "OUT"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:57
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:81
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:38
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:80
-#: lib/block_scout_web/templates/address_validation/index.html.eex:38
-#: lib/block_scout_web/templates/block/index.html.eex:30
-#: lib/block_scout_web/templates/block_transaction/index.html.eex:50
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:39
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:43
-#: lib/block_scout_web/templates/transaction/index.html.eex:45
-#: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:38
-msgid "Older"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract/index.html.eex:34
 msgid "Optimization enabled"
@@ -750,7 +734,7 @@ msgid "Telegram"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:24
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:26
 msgid "There are no holders for this Token."
 msgstr ""
 
@@ -771,7 +755,7 @@ msgid "There are no logs for this transaction."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:23
+#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:15
 msgid "There are no token transfers for this address."
 msgstr ""
 
@@ -1105,9 +1089,6 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:19
-#: lib/block_scout_web/templates/address_validation/index.html.eex:22
-#: lib/block_scout_web/templates/address_validation/index.html.eex:47
 #: lib/block_scout_web/templates/chain/show.html.eex:99
 #: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
@@ -1130,23 +1111,7 @@ msgid "GraphQL"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/index.html.eex:15
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:66
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:73
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:90
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:47
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:71
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:89
-#: lib/block_scout_web/templates/block/index.html.eex:19
-#: lib/block_scout_web/templates/block/index.html.eex:39
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:48
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:33
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:44
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:34
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:52
-#: lib/block_scout_web/templates/transaction/index.html.eex:36
-#: lib/block_scout_web/templates/transaction/index.html.eex:54
 msgid "Loading"
 msgstr ""
 
@@ -1317,19 +1282,19 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:34
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:61
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:28
+#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:20
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:57
-#: lib/block_scout_web/templates/address_validation/index.html.eex:29
+#: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/chain/show.html.eex:91
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:19
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:19
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:21
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:20
 #: lib/block_scout_web/templates/transaction/index.html.eex:20
 msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_validation/index.html.eex:25
+#: lib/block_scout_web/templates/address_validation/index.html.eex:18
 msgid "There are no blocks validated by this address."
 msgstr ""
 
@@ -1354,11 +1319,6 @@ msgstr ""
 msgid "Coin Balance History"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:48
-msgid "Loading balances"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:22
 #: lib/block_scout_web/templates/chain/show.html.eex:13
@@ -1382,7 +1342,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:23
+#: lib/block_scout_web/templates/block/index.html.eex:16
 msgid "There are no blocks."
 msgstr ""
 
@@ -1727,7 +1687,7 @@ msgstr ""
 
 #, elixir-format
 #:
-#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:37
+#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:40
 msgid "Page"
 msgstr ""
 
@@ -1745,7 +1705,7 @@ msgstr ""
 
 #, elixir-format
 #:
-#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:37
+#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:40
 msgid "of"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -582,7 +582,6 @@ msgid "Next"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:37
 #: lib/block_scout_web/templates/tokens/inventory/index.html.eex:32
 msgid "Next Page"
 msgstr ""
@@ -604,21 +603,6 @@ msgstr ""
 msgid "OUT"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:57
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:81
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:38
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:80
-#: lib/block_scout_web/templates/address_validation/index.html.eex:38
-#: lib/block_scout_web/templates/block/index.html.eex:30
-#: lib/block_scout_web/templates/block_transaction/index.html.eex:50
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:39
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:43
-#: lib/block_scout_web/templates/transaction/index.html.eex:45
-#: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:38
-msgid "Older"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract/index.html.eex:34
 msgid "Optimization enabled"
@@ -750,7 +734,7 @@ msgid "Telegram"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:24
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:26
 msgid "There are no holders for this Token."
 msgstr ""
 
@@ -771,7 +755,7 @@ msgid "There are no logs for this transaction."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:23
+#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:15
 msgid "There are no token transfers for this address."
 msgstr ""
 
@@ -1105,9 +1089,6 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:19
-#: lib/block_scout_web/templates/address_validation/index.html.eex:22
-#: lib/block_scout_web/templates/address_validation/index.html.eex:47
 #: lib/block_scout_web/templates/chain/show.html.eex:99
 #: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
@@ -1129,24 +1110,7 @@ msgstr ""
 msgid "GraphQL"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/address/index.html.eex:15
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:66
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:73
-#: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:90
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:47
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:71
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:89
-#: lib/block_scout_web/templates/block/index.html.eex:19
-#: lib/block_scout_web/templates/block/index.html.eex:39
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:48
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:33
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:44
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:34
-#: lib/block_scout_web/templates/tokens/transfer/index.html.eex:52
-#: lib/block_scout_web/templates/transaction/index.html.eex:36
-#: lib/block_scout_web/templates/transaction/index.html.eex:54
 msgid "Loading"
 msgstr ""
 
@@ -1317,19 +1281,19 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:34
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:61
-#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:28
+#: lib/block_scout_web/templates/address_token_transfer/index.html.eex:20
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:57
-#: lib/block_scout_web/templates/address_validation/index.html.eex:29
+#: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/chain/show.html.eex:91
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:19
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:19
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:21
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:20
 #: lib/block_scout_web/templates/transaction/index.html.eex:20
 msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_validation/index.html.eex:25
+#: lib/block_scout_web/templates/address_validation/index.html.eex:18
 msgid "There are no blocks validated by this address."
 msgstr ""
 
@@ -1354,11 +1318,6 @@ msgstr ""
 msgid "Coin Balance History"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:48
-msgid "Loading balances"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:22
 #: lib/block_scout_web/templates/chain/show.html.eex:13
@@ -1382,7 +1341,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:23
+#: lib/block_scout_web/templates/block/index.html.eex:16
 msgid "There are no blocks."
 msgstr ""
 
@@ -1727,7 +1686,7 @@ msgstr ""
 
 #, elixir-format
 #:
-#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:37
+#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:40
 msgid "Page"
 msgstr ""
 
@@ -1745,7 +1704,7 @@ msgstr ""
 
 #, elixir-format
 #:
-#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:37
+#: lib/block_scout_web/templates/common_components/_pagination_container.html.eex:40
 msgid "of"
 msgstr ""