Refactor controller and template for async load

apps/block_scout_web/lib/block_scout_web/controllers/address_validation_controller.ex

@@ -5,12 +5,16 @@ defmodule BlockScoutWeb.AddressValidationController do
   use BlockScoutWeb, :controller
 
   import BlockScoutWeb.AddressController, only: [transaction_count: 1, validation_count: 1]
-  import BlockScoutWeb.Chain, only: [paging_options: 1, next_page_params: 3, split_list_by_page: 1]
 
-  alias Explorer.{Chain, Market}
+  import BlockScoutWeb.Chain,
+    only: [paging_options: 1, next_page_params: 3, split_list_by_page: 1]
+
+  alias BlockScoutWeb.BlockView
   alias Explorer.ExchangeRates.Token
+  alias Explorer.{Chain, Market}
+  alias Phoenix.View
 
-  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.find_or_insert_address_from_hash(address_hash) do
       full_options =
@@ -28,15 +32,52 @@ defmodule BlockScoutWeb.AddressValidationController do
       blocks_plus_one = Chain.get_blocks_validated_by_address(full_options, address)
       {blocks, next_page} = split_list_by_page(blocks_plus_one)
 
+      next_page_path =
+        case next_page_params(next_page, blocks, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            address_validation_path(
+              conn,
+              :index,
+              address_hash_string,
+              Map.delete(next_page_params, "type")
+            )
+        end
+
+      items =
+        Enum.map(blocks, fn block ->
+          View.render_to_string(
+            BlockView,
+            "_tile.html",
+            conn: conn,
+            block: block,
+            block_type: BlockView.block_type(block)
+          )
+        end)
+
+      json(conn, %{items: items, next_page_path: next_page_path})
+    else
+      :error ->
+        unprocessable_entity(conn)
+
+      {:error, :not_found} ->
+        not_found(conn)
+    end
+  end
+
+  def index(conn, %{"address_id" => address_hash_string}) do
+    with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
+         {:ok, address} <- Chain.find_or_insert_address_from_hash(address_hash) do
       render(
         conn,
         "index.html",
         address: address,
-        blocks: blocks,
+        current_path: current_path(conn),
         transaction_count: transaction_count(address),
         validation_count: validation_count(address),
-        exchange_rate: Market.get_exchange_rate(Explorer.coin()) || Token.null(),
-        next_page_params: next_page_params(next_page, blocks, params)
+        exchange_rate: Market.get_exchange_rate(Explorer.coin()) || Token.null()
       )
     else
       :error ->

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

@@ -1,7 +1,7 @@
 <section class="container">
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
 
-  <section>
+  <section data-page="blocks-validated">
     <div class="card">
       <div class="card-header">
         <!-- DESKTOP TAB NAV -->
@@ -98,7 +98,7 @@
         </ul>
       </div>
 
-      <div class="card-body">
+      <div data-async-listing="<%= @current_path %>" class="card-body">
         <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 validations" %></a>
@@ -106,24 +106,31 @@
         </div>
 
         <h2 class="card-title"><%=gettext("Blocks Validated")%></h2>
-        <span data-selector="validations-list">
-          <%= for block <- @blocks do %>
-            <%= render BlockScoutWeb.BlockView, "_tile.html", block: block, block_type: BlockScoutWeb.BlockView.block_type(block)%>
-          <% end %>
-        </span>
-        <div>
-          <%= if @next_page_params do %>
-            <%= link(
-              gettext("Older"),
-              class: "button button-secondary button-sm float-right mt-3",
-              to: address_validation_path(
-                @conn,
-                :index,
-                @address,
-                @next_page_params
-              )
-            ) %>
-          <% end %>
+        <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>
+        <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
+          <span class="alert-link">
+            <%= gettext "Something went wrong, click to reload." %>
+          </span>
+        </button>
+        <div data-items data-selector="validations-list"></div>
+        <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 -->