generic showLoader function, fix: loader is shown inside the chart every time before the chart rendered even if wait less than 1 sec

apps/block_scout_web/assets/js/lib/market_history_chart.js

@@ -4,6 +4,7 @@ import humps from 'humps'
 import numeral from 'numeral'
 import { formatUsdValue } from '../lib/currency'
 import sassVariables from '../../css/app.scss'
+import { showLoader } from '../lib/utils'
 
 const config = {
   type: 'line',
@@ -130,7 +131,8 @@ export function createMarketHistoryChart (el) {
   const dataPath = el.dataset.market_history_chart_path
   const $chartLoading = $('[data-chart-loading-message]')
 
-  $chartLoading.removeAttr('hidden')
+  const isTimeout = true
+  const timeoutID = showLoader(isTimeout, $chartLoading)
 
   const $chartError = $('[data-chart-error-message]')
   const chart = new MarketHistoryChart(el, 0, [])
@@ -146,6 +148,7 @@ export function createMarketHistoryChart (el) {
     })
     .always(() => {
       $chartLoading.hide()
+      clearTimeout(timeoutID)
     })
   return chart
 }

apps/block_scout_web/assets/js/lib/utils.js

@@ -11,3 +11,16 @@ export function batchChannel (func) {
     debouncedFunc()
   }
 }
+
+export function showLoader (isTimeout, loader) {
+  if (isTimeout) {
+    const timeout = setTimeout(function () {
+      loader.removeAttr('hidden')
+      loader.show()
+    }, 1000)
+    return timeout
+  } else {
+    loader.hide()
+    return null
+  }
+}

apps/block_scout_web/assets/js/pages/chain.js

@@ -5,7 +5,7 @@ import numeral from 'numeral'
 import socket from '../socket'
 import { exchangeRateChannel, formatUsdValue } from '../lib/currency'
 import { createStore, connectElements } from '../lib/redux_helpers.js'
-import { batchChannel } from '../lib/utils'
+import { batchChannel, showLoader } from '../lib/utils'
 import listMorph from '../lib/list_morph'
 import { createMarketHistoryChart } from '../lib/market_history_chart'
 
@@ -210,14 +210,7 @@ const elements = {
   },
   '[data-selector="chain-block-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
-      if (state && state.blocksLoading) {
-        setTimeout(function () {
-          $el.removeAttr('hidden')
-          $el.show()
-        }, 1000)
-      } else {
-        $el.hide()
-      }
+      showLoader(state.blocksLoading, $el)
     }
   },
   '[data-selector="transactions-list"] [data-selector="error-message"]': {
@@ -227,14 +220,7 @@ const elements = {
   },
   '[data-selector="transactions-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
-      if (state && state.transactionsLoading) {
-        setTimeout(function () {
-          $el.removeAttr('hidden')
-          $el.show()
-        }, 1000)
-      } else {
-        $el.hide()
-      }
+      showLoader(state.transactionsLoading, $el)
     }
   },
   '[data-selector="transactions-list"]': {