Change how template and controller act.

now the template will not load any listing at all and the controller
will respond to json requests with the listing results.

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

@@ -1,25 +1,59 @@
 defmodule BlockScoutWeb.Tokens.TransferController do
   use BlockScoutWeb, :controller
 
+  alias BlockScoutWeb.Tokens.TransferView
   alias Explorer.Chain
+  alias Phoenix.View
 
   import BlockScoutWeb.Chain, only: [split_list_by_page: 1, paging_options: 1, 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_transfers <- Chain.fetch_token_transfers_from_token_hash(address_hash, paging_options(params)) do
       {token_transfers_paginated, next_page} = split_list_by_page(token_transfers)
 
+      next_page_path =
+        case next_page_params(next_page, token_transfers_paginated, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            token_transfer_path(conn, :index, token.contract_address_hash, Map.delete(next_page_params, "type"))
+        end
+
+      transfers_json =
+        Enum.map(token_transfers_paginated, fn transfer ->
+          View.render_to_string(
+            TransferView,
+            "_token_transfer.html",
+            conn: conn,
+            token: token,
+            transfer: transfer
+          )
+        end)
+
+      json(conn, %{items: transfers_json, next_page_path: next_page_path})
+    else
+      :error ->
+        unprocessable_entity(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",
-        transfers: token_transfers_paginated,
+        current_path: current_path(conn),
         token: token,
         holders_count_consolidation_enabled: Chain.token_holders_counter_consolidation_enabled?(),
         total_token_transfers: Chain.count_token_transfers_from_token_hash(address_hash),
-        total_token_holders: Chain.count_token_holders_from_token_hash(address_hash),
-        next_page_params: next_page_params(next_page, token_transfers_paginated, params)
+        total_token_holders: Chain.count_token_holders_from_token_hash(address_hash)
       )
     else
       :error ->

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

@@ -15,28 +15,35 @@
         <%= render OverviewView, "_tabs.html", assigns %>
       </div>
 
-      <div class="card-body">
+      <div class="card-body" data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
-
-        <%= if Enum.any?(@transfers) do %>
-          <%= for transfer <- @transfers do %>
-            <%= render("_token_transfer.html", conn: @conn, token: @token, transfer: transfer) %>
-          <% end %>
-        <% else %>
-          <div class="tile tile-muted text-center">
-            <span data-selector="empty-transactions-list">
-              <%= gettext "There are no transfers for this Token." %>
-            </span>
-          </div>
-        <% end %>
-
-        <%= if @next_page_params do %>
-          <%= link(
-            gettext("Older"),
-            class: "button button-secondary button-small float-right mt-4",
-            to: token_path(@conn, :show, @token.contract_address_hash, @next_page_params)
-          ) %>
-        <% 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 class="tile tile-muted text-center" style="display: none;">
+          <span data-selector="empty-transactions-list">
+            <%= gettext "There are no transfers for this Token." %>
+          </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>
+        <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>