Cleanup

apps/block_scout_web/assets/js/pages/address.js

@@ -27,6 +27,7 @@ export const initialState = {
   internalTransactionsBatch: [],
   validatedBlocks: [],
 
+  loadingNextPage: false,
   nextPage: null,
 
   beyondPageOne: null
@@ -148,8 +149,14 @@ export function reducer (state = initialState, action) {
         balance: action.msg.balance
       })
     }
+    case 'LOADING_NEXT_PAGE': {
+      return Object.assign({}, state, {
+        loadingNextPage: true
+      })
+    }
     case 'NEXT_TRANSACTIONS_PAGE': {
       return Object.assign({}, state, {
+        loadingNextPage: false,
         nextPage: action.msg.nextPage,
         transactions: [
           ...state.transactions,
@@ -196,7 +203,7 @@ if ($addressDetailsPage.length) {
           blockHtml: el.outerHTML
         })).toArray(),
 
-        nextPage: $('[data-selector="next-page-button"]').length ? `${$('[data-selector="next-page-button"]').hide().attr("href")}&type=JSON` : null,
+        nextPage: $('[data-selector="next-page-button"]').length ? `${$('[data-selector="next-page-button"]').hide().attr('href')}&type=JSON` : null,
 
         beyondPageOne: !!blockNumber
       })
@@ -218,15 +225,23 @@ if ($addressDetailsPage.length) {
       blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
       blocksChannel.on('new_block', (msg) => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) }))
 
-      $('[data-selector="transactions-list"]').length && atBottom(function loadMoreTransactions() {
-        $.get(store.getState().nextPage).done(msg => {
-          store.dispatch({ type: 'NEXT_TRANSACTIONS_PAGE', msg: humps.camelizeKeys(msg) })
-          setTimeout(() => atBottom(loadMoreTransactions), 1000)
-        })
+      $('[data-selector="transactions-list"]').length && atBottom(function loadMoreTransactions () {
+        const nextPage = store.getState().nextPage
+        if (nextPage) {
+          store.dispatch({ type: 'LOADING_NEXT_PAGE' })
+          $.get(nextPage).done(msg => {
+            store.dispatch({ type: 'NEXT_TRANSACTIONS_PAGE', msg: humps.camelizeKeys(msg) })
+          })
+        }
       })
     },
     render (state, oldState) {
       if (state.channelDisconnected) $('[data-selector="channel-disconnected-message"]').show()
+      if (state.loadingNextPage) {
+        $('[data-selector="loading-next-page"]').show()
+      } else {
+        $('[data-selector="loading-next-page"]').hide()
+      }
 
       if (oldState.balance !== state.balance) {
         $('[data-selector="balance-card"]').empty().append(state.balance)
@@ -240,7 +255,7 @@ if ($addressDetailsPage.length) {
         const container = $('[data-selector="pending-transactions-list"]')[0]
         const newElements = _.map(state.pendingTransactions, ({ transactionHtml }) => $(transactionHtml)[0])
         listMorph(container, newElements, { key: 'dataset.transactionHash' })
-        if($('[data-selector="pending-transactions-count"]').length) $('[data-selector="pending-transactions-count"]')[0].innerHTML = numeral(state.pendingTransactions.filter(({ validated }) => !validated).length).format()
+        if ($('[data-selector="pending-transactions-count"]').length) $('[data-selector="pending-transactions-count"]')[0].innerHTML = numeral(state.pendingTransactions.filter(({ validated }) => !validated).length).format()
       }
       function updateTransactions () {
         const container = $('[data-selector="transactions-list"]')[0]

apps/block_scout_web/assets/js/utils.js

@@ -116,6 +116,7 @@ function smarterSlideUp ($el, { complete = _.noop } = {}) {
 }
 
 export function listMorph (container, newElements, { key, horizontal }) {
+  if (!container) return
   const oldElements = $(container).children().get()
   let currentList = _.map(oldElements, (el) => ({ id: _.get(el, key), el }))
   const newList = _.map(newElements, (el) => ({ id: _.get(el, key), el }))
@@ -150,13 +151,14 @@ export function listMorph (container, newElements, { key, horizontal }) {
   })
 }
 
-export function atBottom(callback) {
-  $(window).on("scroll", function infiniteScrollChecker () {
-    var scrollHeight = $(document).height();
-    var scrollPosition = $(window).height() + $(window).scrollTop();
+export function atBottom (callback) {
+  function infiniteScrollChecker () {
+    var scrollHeight = $(document).height()
+    var scrollPosition = $(window).height() + $(window).scrollTop()
     if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
-      $(window).off("scroll", infiniteScrollChecker)
       callback()
     }
-  });
+  }
+  infiniteScrollChecker()
+  $(window).on('scroll', infiniteScrollChecker)
 }

apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex

@@ -33,26 +33,37 @@ defmodule BlockScoutWeb.AddressTransactionController do
       transactions_plus_one = Chain.address_to_transactions(address, full_options)
       {transactions, next_page} = split_list_by_page(transactions_plus_one)
 
+      next_page =
+        case next_page_params(next_page, transactions, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            address_transaction_path(
+              conn,
+              :index,
+              address,
+              next_page_params
+            )
+        end
+
       json(
         conn,
         %{
-          transactions: Enum.map(transactions, fn transaction ->
-            %{
-              transaction_hash: Hash.to_string(transaction.hash),
-              transaction_html: View.render_to_string(
-                TransactionView,
-                "_tile.html",
-                current_address: address,
-                transaction: transaction
-              )
-            }
-          end),
-          next_page: address_transaction_path(
-            conn,
-            :index,
-            address,
-            next_page_params(next_page, transactions, params)
-          )
+          transactions:
+            Enum.map(transactions, fn transaction ->
+              %{
+                transaction_hash: Hash.to_string(transaction.hash),
+                transaction_html:
+                  View.render_to_string(
+                    TransactionView,
+                    "_tile.html",
+                    current_address: address,
+                    transaction: transaction
+                  )
+              }
+            end),
+          next_page: next_page
         }
       )
     else

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

@@ -74,6 +74,9 @@
               <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: transaction) %>
             <% end %>
           </span>
+          <div data-selector="loading-next-page" style="display: none;">
+            <%= gettext("Loading") %>...
+          </div>
         <% else %>
           <div class="tile tile-muted text-center">
             <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>