Merge pull request blockscout#5680 from blockscout/np-async-listing-l…

…oad-changes Fix broken token icons; Disable animation in lists of data in order t…
syscoin · Jun 22, 2022 · 1c9408d · 1c9408d
1 parent b7d27f1
commit 1c9408d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - [#5667](https://github.com/blockscout/blockscout/pull/5667) - Address page: scroll to selected tab's data
 
 ### Fixes
+- [#5680](https://github.com/blockscout/blockscout/pull/5680) - Fix broken token icons; Disable animation in lists; Fix doubled requests for some pages
 - [#5671](https://github.com/blockscout/blockscout/pull/5671) - Fix double requests for token exchange rates; Disable fetching `btc_value` by default (add `EXCHANGE_RATES_FETCH_BTC_VALUE` env variable); Add `CACHE_EXCHANGE_RATES_PERIOD` env variable
 - [#5676](https://github.com/blockscout/blockscout/pull/5676) - Fix wrong miner address shown for post EIP-1559 block for clique network
 

diff --git a/apps/block_scout_web/assets/js/lib/async_listing_load.js b/apps/block_scout_web/assets/js/lib/async_listing_load.js
@@ -367,12 +367,14 @@ function firstPageLoad (store) {
 
 const $element = $('[data-async-load]')
 if ($element.length) {
-  if (Object.prototype.hasOwnProperty.call($element.data(), 'noFirstLoading')) {
-    enableFirstLoading = false
-  }
-  if (enableFirstLoading) {
-    const store = createStore(asyncReducer)
-    connectElements({ store, elements })
-    firstPageLoad(store)
+  if (!Object.prototype.hasOwnProperty.call($element.data(), 'noSelfCalls')) {
+    if (Object.prototype.hasOwnProperty.call($element.data(), 'noFirstLoading')) {
+      enableFirstLoading = false
+    }
+    if (enableFirstLoading) {
+      const store = createStore(asyncReducer)
+      connectElements({ store, elements })
+      firstPageLoad(store)
+    }
   }
 }
diff --git a/apps/block_scout_web/assets/js/lib/list_morph.js b/apps/block_scout_web/assets/js/lib/list_morph.js
@@ -35,7 +35,7 @@ export default function (container, newElements, { key, horizontal } = {}) {
   const overlap = intersectionBy(newList, currentList, 'id').map(({ id, el }) => ({ id, el: updateAllAges($(el))[0] }))
   // remove old items
   const removals = differenceBy(currentList, newList, 'id')
-  let canAnimate = !horizontal && newList.length > 0
+  let canAnimate = false && !horizontal && newList.length > 0 // disabled animation in order to speed up UI
   removals.forEach(({ el }) => {
     if (!canAnimate) return el.remove()
     const $el = $(el)
@@ -59,7 +59,7 @@ export default function (container, newElements, { key, horizontal } = {}) {
 
   // add new items
   const finalList = newList.map(({ id, el }) => get(find(currentList, { id }), 'el', el)).reverse()
-  canAnimate = !horizontal
+  canAnimate = false && !horizontal // disabled animation in order to speed up UI
   finalList.forEach((el, i) => {
     if (el.parentElement) return
     if (!canAnimate) return container.insertBefore(el, get(finalList, `[${i - 1}]`))

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex
@@ -11,7 +11,7 @@
     <div class="card">
       <%= render OverviewView, "_tabs.html", assigns %>
       <!-- Token Holders -->
-      <div class="card-body" data-async-listing="<%= @current_path %>">
+      <div class="card-body" data-async-listing="<%= @current_path %>" data-no-self-calls>
         <%= render BlockScoutWeb.CommonComponentsView, "_channel_disconnected_message.html", text: gettext("Connection Lost") %>
         <h2 class="card-title list-title-description"><%= gettext "Token Holders" %></h2>
 

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/index.html.eex
@@ -6,7 +6,7 @@
 >
   <%= render BlockScoutWeb.Advertisement.TextAdView, "index.html", conn: @conn %>
   <div class="card">
-    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
+    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>" data-no-self-calls>
 	  <h1 class="card-title list-title-description"><%= gettext "Tokens" %></h1>
 
 	<div class="list-top-pagination-container-wrapper tokens-list-search-input-outer-container d-flex" style="float: right;">