set timeout for loading message on the main page

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

@@ -148,6 +148,7 @@ export function createMarketHistoryChart (el) {
 }
 
 $('[data-chart-error-message]').on('click', _event => {
+  $('[data-chart-loading-message]').removeAttr('hidden')
   $('[data-chart-loading-message]').show()
   $('[data-chart-error-message]').hide()
   createMarketHistoryChart($('[data-chart="marketHistoryChart"]')[0])

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

@@ -211,7 +211,10 @@ const elements = {
   '[data-selector="chain-block-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
       if (state.blocksLoading) {
-        $el.show()
+        setTimeout(function(){
+          $el.removeAttr('hidden')
+          $el.show()
+        }, 1000)
       } else {
         $el.hide()
       }
@@ -224,7 +227,14 @@ const elements = {
   },
   '[data-selector="transactions-list"] [data-selector="loading-message"]': {
     render ($el, state, oldState) {
-      $el.toggle(state.transactionsLoading)
+      if (state.transactionsLoading) {
+        setTimeout(function(){
+          $el.removeAttr('hidden')
+          $el.show()
+        }, 1000)
+      } else {
+        $el.hide()
+      }
     }
   },
   '[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>