From 9cfc0c6594a139a15dc39e13baca1402438886df Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Thu, 18 Jul 2019 19:17:12 +0300
Subject: [PATCH] generic showLoader function, fix: loader is shown inside the
 chart every time before the chart rendered even if wait less than 1 sec

---
 .../assets/js/lib/market_history_chart.js     |  5 ++++-
 apps/block_scout_web/assets/js/lib/utils.js   | 13 ++++++++++++
 apps/block_scout_web/assets/js/pages/chain.js | 20 +++----------------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/block_scout_web/assets/js/lib/market_history_chart.js b/apps/block_scout_web/assets/js/lib/market_history_chart.js
index ae70a1b5d1..d54d998580 100644
--- a/apps/block_scout_web/assets/js/lib/market_history_chart.js
+++ b/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
 }
diff --git a/apps/block_scout_web/assets/js/lib/utils.js b/apps/block_scout_web/assets/js/lib/utils.js
index d3bd6e84d1..28481e9d83 100644
--- a/apps/block_scout_web/assets/js/lib/utils.js
+++ b/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
+  }
+}
diff --git a/apps/block_scout_web/assets/js/pages/chain.js b/apps/block_scout_web/assets/js/pages/chain.js
index f0586ef796..23d6fc4223 100644
--- a/apps/block_scout_web/assets/js/pages/chain.js
+++ b/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"]': {