Refactor template for first page async load

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

@@ -7,41 +7,36 @@
         <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       </div>
 
-      <div class="card-body">
+      <div data-async-listing="<%= @current_path %>" class="card-body">
         <h2 class="card-title">
           <span class="text-muted"><%= gettext "Tokens" %></span> / <%= token_name(@token) %>
         </h2>
-
+        <div data-loading-message class="tile tile-muted text-center mt-3">
-        <%= if Enum.any?(@transactions) do %>
+          <span class="loading-spinner-small mr-2">
-          <span data-selector="transactions-list">
+            <span class="loading-spinner-block-1"></span>
-            <%= for transaction <- @transactions do %>
+            <span class="loading-spinner-block-2"></span>
-              <%= render(
-                  BlockScoutWeb.TransactionView,
-                  "_tile.html",
-                  transaction: transaction,
-                  current_address: @address
-                  ) %>
-            <% end %>
           </span>
-        <% else %>
+          <%= gettext("Loading...") %>
-          <div class="tile tile-muted text-center">
+        </div>
+        <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span><%= gettext "There are no token transfers for this address." %></span>
         </div>
-        <% end %>
+        <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
-
+          <span class="alert-link">
-        <%= if @next_page_params do %>
+            <%= gettext "Something went wrong, click to reload." %>
-          <%= link(
+          </span>
-            gettext("Next"),
+        </button>
-            class: "button button-secondary button-sm float-right mt-3",
+        <div data-items></div>
-            to: address_token_transfers_path(
+        <a data-next-page-button href="#" class="button button-secondary button-small float-right mt-4" style="display: none;">
-              @conn,
+          <%= gettext("Older") %>
-              :index,
+        </a>
-              @address.hash,
+        <div data-loading-button class="button button-secondary button-small float-right mt-4" style="display: none;">
-              @token.contract_address_hash,
+          <span class="loading-spinner-small mr-2">
-              @next_page_params
+            <span class="loading-spinner-block-1"></span>
-            )
+            <span class="loading-spinner-block-2"></span>
-          ) %>
+          </span>
-        <% end %>
+          <%= gettext("Loading") %>...
+        </div>
       </div>
     </div>
   </section>