Merge pull request #2324 from poanetwork/ab-set-timeout-on-loading-messages

set timeout for loading message on the main page

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#2360](https://github.com/poanetwork/blockscout/pull/2360) - add default evm version to smart contract verification
 - [#2352](https://github.com/poanetwork/blockscout/pull/2352) - Fetch rewards in parallel with transactions
 - [#2294](https://github.com/poanetwork/blockscout/pull/2294) - add healthy block period checking endpoint
+- [#2324](https://github.com/poanetwork/blockscout/pull/2324) - set timeout for loading message on the main page
 
 ### Fixes
 - [#2410](https://github.com/poanetwork/blockscout/pull/2410) - preload smart contract for logs decoding

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',
@@ -129,6 +130,10 @@ class MarketHistoryChart {
 export function createMarketHistoryChart (el) {
   const dataPath = el.dataset.market_history_chart_path
   const $chartLoading = $('[data-chart-loading-message]')
+
+  const isTimeout = true
+  const timeoutID = showLoader(isTimeout, $chartLoading)
+
   const $chartError = $('[data-chart-error-message]')
   const chart = new MarketHistoryChart(el, 0, [])
   $.getJSON(dataPath, {type: 'JSON'})
@@ -143,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

@@ -9,7 +9,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'
 
@@ -214,11 +214,7 @@ const elements = {
   },
   '[data-selector="chain-block-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
-      if (state.blocksLoading) {
-        $el.show()
-      } else {
-        $el.hide()
-      }
+      showLoader(state.blocksLoading, $el)
     }
   },
   '[data-selector="transactions-list"] [data-selector="error-message"]': {
@@ -228,7 +224,7 @@ const elements = {
   },
   '[data-selector="transactions-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
-      $el.toggle(state.transactionsLoading)
+      showLoader(state.transactionsLoading, $el)
     }
   },
   '[data-selector="transactions-list"]': {

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -5,7 +5,7 @@
       <div class="dashboard-banner-network-graph">
         <!-- Graph -->
         <div class="dashboard-banner-chart">
-          <div data-chart-loading-message class="tile tile-muted text-center mt-5">
+          <div hidden data-chart-loading-message class="tile tile-muted text-center mt-5">
             <span class="loading-spinner-small mr-2">
               <span class="loading-spinner-block-1"></span>
               <span class="loading-spinner-block-2"></span>
@@ -91,8 +91,8 @@
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
-        <div data-selector="loading-message" class="tile tile-muted text-center mt-3 w-100">
-          <span class="loading-spinner-small mr-2">
+        <div hidden data-selector="loading-message" class="tile tile-muted text-center mt-3 w-100" >
+          <span  class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
             <span class="loading-spinner-block-2"></span>
           </span>
@@ -117,7 +117,7 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-        <div data-selector="loading-message" class="tile tile-muted text-center mt-3">
+        <div hidden data-selector="loading-message" class="tile tile-muted text-center mt-3">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
             <span class="loading-spinner-block-2"></span>