adapt the token holders controller and template to work async

apps/block_scout_web/lib/block_scout_web/controllers/tokens/holder_controller.ex

@@ -1,7 +1,9 @@
 defmodule BlockScoutWeb.Tokens.HolderController do
   use BlockScoutWeb, :controller
 
+  alias BlockScoutWeb.Tokens.HolderView
   alias Explorer.Chain
+  alias Phoenix.View
 
   import BlockScoutWeb.Chain,
     only: [
@@ -10,21 +12,47 @@ defmodule BlockScoutWeb.Tokens.HolderController do
       next_page_params: 3
     ]
 
-  def index(conn, %{"token_id" => address_hash_string} = params) do
+  def index(conn, %{"token_id" => address_hash_string, "type" => "JSON"} = params) do
     with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
          {:ok, token} <- Chain.token_from_address_hash(address_hash),
          token_balances <- Chain.fetch_token_holders_from_token_hash(address_hash, paging_options(params)) do
       {token_balances_paginated, next_page} = split_list_by_page(token_balances)
 
+      next_page_path =
+        case next_page_params(next_page, token_balances_paginated, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            token_holder_path(conn, :index, address_hash, Map.delete(next_page_params, "type"))
+        end
+
+      token_balances_json =
+        Enum.map(token_balances_paginated, fn token_balance ->
+          View.render_to_string(HolderView, "_token_balances.html", token_balance: token_balance, token: token)
+        end)
+
+      json(conn, %{items: token_balances_json, next_page_path: next_page_path})
+    else
+      :error ->
+        not_found(conn)
+
+      {:error, :not_found} ->
+        not_found(conn)
+    end
+  end
+
+  def index(conn, %{"token_id" => address_hash_string}) do
+    with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
+         {:ok, token} <- Chain.token_from_address_hash(address_hash) do
       render(
         conn,
         "index.html",
-        token: token,
-        token_balances: token_balances_paginated,
+        current_path: current_path(conn),
         holders_count_consolidation_enabled: Chain.token_holders_counter_consolidation_enabled?(),
-        total_token_transfers: Chain.count_token_transfers_from_token_hash(address_hash),
+        token: token,
         total_token_holders: Chain.count_token_holders_from_token_hash(address_hash),
-        next_page_params: next_page_params(next_page, token_balances_paginated, params)
+        total_token_transfers: Chain.count_token_transfers_from_token_hash(address_hash)
       )
     else
       :error ->

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

@@ -16,28 +16,37 @@
       </div>
 
       <!-- Token Holders -->
-      <div class="card-body">
+      <div class="card-body" data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Holders" %></h2>
 
-        <%= if Enum.any?(@token_balances) do %>
-          <%= for token_balance <- @token_balances do %>
-            <%= render "_token_balances.html", token: @token, token_balance: token_balance %>
-          <% end %>
-        <% else %>
+        <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">
             <span data-selector="empty-transactions-list">
               <%= gettext "There are no holders for this Token." %>
             </span>
           </div>
-        <% end %>
-
-        <%= if @next_page_params do %>
-          <%= link(
-            gettext("Next Page"),
-            class: "button button-secondary button-small float-right mt-4",
-            to: token_holder_path(@conn, :index, @token.contract_address_hash, @next_page_params)
-          ) %>
-        <% end %>
+        </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") %>
+        </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>