load data async on addresses page

apps/block_scout_web/lib/block_scout_web/controllers/address_controller.ex

@@ -3,11 +3,13 @@ defmodule BlockScoutWeb.AddressController do
 
   import BlockScoutWeb.Chain, only: [paging_options: 1, next_page_params: 3, split_list_by_page: 1]
 
+  alias BlockScoutWeb.AddressView
   alias Explorer.{Chain, Market}
   alias Explorer.Chain.Address
   alias Explorer.ExchangeRates.Token
+  alias Phoenix.View
 
-  def index(conn, params) do
+  def index(conn, %{"type" => "JSON"} = params) do
     addresses =
       params
       |> paging_options()
@@ -15,41 +17,49 @@ defmodule BlockScoutWeb.AddressController do
 
     {addresses_page, next_page} = split_list_by_page(addresses)
 
-    cur_page_number =
-      cond do
-        !params["prev_page_number"] -> 1
-        params["next_page"] -> String.to_integer(params["prev_page_number"]) + 1
-        params["prev_page"] -> String.to_integer(params["prev_page_number"]) - 1
-      end
-
     next_page_path =
       case next_page_params(next_page, addresses_page, params) do
         nil ->
           nil
 
         next_page_params ->
-          next_params =
-            next_page_params
-            |> Map.put("prev_page_path", cur_page_path(conn, params))
-            |> Map.put("next_page", true)
-            |> Map.put("prev_page_number", cur_page_number)
-
           address_path(
             conn,
             :index,
-            next_params
+            next_page_params
           )
       end
 
+    exchange_rate = Market.get_exchange_rate(Explorer.coin()) || Token.null()
+    total_supply = Chain.total_supply()
+
+    json(
+      conn,
+      %{
+        items:
+          addresses_page
+          |> Enum.with_index(1)
+          |> Enum.map(fn {{address, tx_count}, index} ->
+            View.render_to_string(
+              AddressView,
+              "_tile.html",
+              address: address,
+              index: index,
+              exchange_rate: exchange_rate,
+              total_supply: total_supply,
+              tx_count: tx_count,
+              validation_count: validation_count(address)
+            )
+          end),
+        next_page_path: next_page_path
+      }
+    )
+  end
+
+  def index(conn, _params) do
     render(conn, "index.html",
-      address_tx_count_pairs: addresses_page,
+      current_path: current_path(conn),
-      page_address_count: Enum.count(addresses_page),
+      address_count: Chain.count_addresses_with_balance_from_cache()
-      address_count: Chain.count_addresses_with_balance_from_cache(),
-      exchange_rate: Market.get_exchange_rate(Explorer.coin()) || Token.null(),
-      total_supply: Chain.total_supply(),
-      next_page_path: next_page_path,
-      prev_page_path: params["prev_page_path"],
-      cur_page_number: cur_page_number
     )
   end
 
@@ -64,16 +74,4 @@ defmodule BlockScoutWeb.AddressController do
   def validation_count(%Address{} = address) do
     Chain.address_to_validation_count(address)
   end
-
-  defp cur_page_path(conn, %{"hash" => _hash, "fetched_coin_balance" => _balance} = params) do
-    new_params = Map.put(params, "next_page", false)
-
-    address_path(
-      conn,
-      :index,
-      new_params
-    )
-  end
-
-  defp cur_page_path(conn, _), do: address_path(conn, :index)
 end

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

@@ -1,20 +1,21 @@
 <section class="container">
   <div class="card">
-    <div class="card-body">
+    <div class="card-body" data-async-listing="<%= @current_path %>">
       <h1 class="card-title"><%= gettext "Addresses" %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
-      <div data-selector="top-addresses-list">
+      <div data-selector="top-addresses-list"></div>
-        <%= for {{address, tx_count}, index} <- Enum.with_index(@address_tx_count_pairs, 1) do %>
+
-          <%= render "_tile.html",
+      <div data-loading-message class="tile tile-muted text-center mt-3" style="display: none;">
-            address: address, index: index, exchange_rate: @exchange_rate,
+        <span class="loading-spinner-small mr-2">
-            total_supply: @total_supply, tx_count: tx_count,
+          <span class="loading-spinner-block-1"></span>
-            validation_count: validation_count(address) %>
+          <span class="loading-spinner-block-2"></span>
-        <% end %>
+        </span>
+        <%= gettext("Loading") %>...
       </div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
     </div>
   </div>
 </section>

apps/block_scout_web/lib/block_scout_web/views/address_view.ex

@@ -3,8 +3,6 @@ defmodule BlockScoutWeb.AddressView do
 
   require Logger
 
-  import BlockScoutWeb.AddressController, only: [validation_count: 1]
-
   alias BlockScoutWeb.LayoutView
   alias Explorer.Chain
   alias Explorer.Chain.{Address, Hash, InternalTransaction, SmartContract, Token, TokenTransfer, Transaction, Wei}