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"]': {