Make transactions tab at Address's page async

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

@@ -8,8 +8,10 @@ defmodule BlockScoutWeb.AddressTransactionController do
   import BlockScoutWeb.AddressController, only: [transaction_count: 1, validation_count: 1]
   import BlockScoutWeb.Chain, only: [current_filter: 1, paging_options: 1, next_page_params: 3, split_list_by_page: 1]
 
+  alias BlockScoutWeb.TransactionView
   alias Explorer.{Chain, Market}
   alias Explorer.ExchangeRates.Token
+  alias Phoenix.View
 
   @transaction_necessity_by_association [
     necessity_by_association: %{
@@ -23,7 +25,7 @@ defmodule BlockScoutWeb.AddressTransactionController do
     }
   ]
 
-  def index(conn, %{"address_id" => address_hash_string} = params) do
+  def index(conn, %{"address_id" => address_hash_string, "type" => "JSON"} = params) do
     with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
          {:ok, address} <- Chain.hash_to_address(address_hash) do
       options =
@@ -35,6 +37,43 @@ defmodule BlockScoutWeb.AddressTransactionController do
       transactions_plus_one = Chain.address_to_transactions(address, options)
       {transactions, next_page} = split_list_by_page(transactions_plus_one)
 
+      next_page_url =
+        case next_page_params(next_page, transactions, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            address_transaction_path(
+              conn,
+              :index,
+              address,
+              Map.delete(next_page_params, "type")
+            )
+        end
+
+      transactions_json =
+        Enum.map(transactions, fn transaction ->
+          View.render_to_string(
+            TransactionView,
+            "_tile.html",
+            current_address: address,
+            transaction: transaction
+          )
+        end)
+
+      json(conn, %{items: transactions_json, next_page_path: next_page_url})
+    else
+      :error ->
+        unprocessable_entity(conn)
+
+      {:error, :not_found} ->
+        not_found(conn)
+    end
+  end
+
+  def index(conn, %{"address_id" => address_hash_string} = params) do
+    with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
+         {:ok, address} <- Chain.hash_to_address(address_hash) do
       render(
         conn,
         "index.html",
@@ -43,8 +82,7 @@ defmodule BlockScoutWeb.AddressTransactionController do
         filter: params["filter"],
         transaction_count: transaction_count(address),
         validation_count: validation_count(address),
-        transactions: transactions,
-        next_page_params: next_page_params(next_page, transactions, params)
+        current_path: current_path(conn)
       )
     else
       :error ->

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

@@ -8,7 +8,7 @@
         <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       </div>
 
-      <div class="card-body">
+      <div class="card-body" data-async-listing="<%= @current_path %>">
         <div data-selector="channel-disconnected-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-danger">
             <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
@@ -51,28 +51,36 @@
           </div>
         </div>
         <h2 class="card-title"><%= gettext "Transactions" %></h2>
-        <span data-selector="transactions-list">
-          <%= for transaction <- @transactions do %>
-            <%= render BlockScoutWeb.TransactionView, "_tile.html", transaction: transaction, current_address: @address %>
-          <% end %>
+        <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;">
+          <div class="tile tile-muted text-center" data-selector="empty-transactions-list">
+            <%= gettext "There are no transactions for this address." %>
+          </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>
 
-        <%= if @next_page_params do %>
-          <%= link(
-            gettext("Older"),
-            class: "button button-secondary button-sm float-right mt-3",
-            "data-selector": "next-page-button",
-            to: address_transaction_path(
-              @conn,
-              :index,
-              @address,
-              @next_page_params
-            )
-          ) %>
-        <% end %>
+        <div data-selector="transactions-list" data-items></div>
 
-        <div class="tile tile-muted text-center" data-selector="empty-transactions-list" style="display: none;">
-          <%= gettext "There are no transactions for this address." %>
+        <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>