Merge pull request #2806 from poanetwork/vb-blocks-fetching-main-page-fix

Fix blocks fetching on the main page

CHANGELOG.md

@@ -5,6 +5,7 @@
 - [#2449](https://github.com/poanetwork/blockscout/pull/2449) - add ability to send notification events through postgres notify
 
 ### Fixes
+- [#2806](https://github.com/poanetwork/blockscout/pull/2806) - Fix blocks fetching on the main page
 - [#2803](https://github.com/poanetwork/blockscout/pull/2803) - Fix block validator custom tooltip
 
 ### Chore

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

@@ -68,10 +68,10 @@ function baseReducer (state = initialState, action) {
       return Object.assign({}, state, { blocksLoading: false })
     }
     case 'BLOCKS_FETCHED': {
-      return Object.assign({}, state, { blocks: [...action.msg.blocks] })
+      return Object.assign({}, state, { blocks: [...action.msg.blocks], blocksLoading: false })
     }
     case 'BLOCKS_REQUEST_ERROR': {
-      return Object.assign({}, state, { blocksError: true })
+      return Object.assign({}, state, { blocksError: true, blocksLoading: false })
     }
     case 'RECEIVED_NEW_EXCHANGE_RATE': {
       return Object.assign({}, state, {

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

@@ -91,49 +91,49 @@
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
-         <div hidden data-selector="loading-message" class="col-lg-3" >
+        <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
-         <div class="tile tile-type-block n-p d-flex flex-column">
-         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
-         <div class="tile-bottom-contents">
-         <div class="dark-block-loader"></div>
-         <div class="dark-block-loader"></div>
+           <div class="tile tile-type-block n-p d-flex flex-column">
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
+             <div class="tile-bottom-contents">
+               <div class="dark-block-loader"></div>
+               <div class="dark-block-loader"></div>
+             </div>
+           </div>
          </div>
         </div>
-        </div>
-        </div>
-         <div hidden data-selector="loading-message" class="col-lg-3" >
+        <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
-         <div class="tile tile-type-block n-p d-flex flex-column">
-         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
-         <div class="tile-bottom-contents">
-         <div class="dark-block-loader"></div>
-         <div class="dark-block-loader"></div>
+           <div class="tile tile-type-block n-p d-flex flex-column">
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+             <div class="tile-bottom-contents">
+               <div class="dark-block-loader"></div>
+               <div class="dark-block-loader"></div>
+             </div>
+           </div>
          </div>
         </div>
-        </div>
-        </div>
-         <div hidden data-selector="loading-message" class="col-lg-3" >
+        <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
-         <div class="tile tile-type-block n-p d-flex flex-column">
-         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
-         <div class="tile-bottom-contents">
-         <div class="dark-block-loader"></div>
-         <div class="dark-block-loader"></div>
+           <div class="tile tile-type-block n-p d-flex flex-column">
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+             <div class="tile-bottom-contents">
+               <div class="dark-block-loader"></div>
+               <div class="dark-block-loader"></div>
+             </div>
+           </div>
          </div>
         </div>
-        </div>
-        </div>
-         <div hidden data-selector="loading-message" class="col-lg-3" >
+        <div hidden data-selector="loading-message" class="col-lg-3" >
          <div data-selector="chain-block">
-         <div class="tile tile-type-block n-p d-flex flex-column">
-         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
-         <div class="tile-bottom-contents">
-        <div class="dark-block-loader"></div>
-         <div class="dark-block-loader"></div>
+           <div class="tile tile-type-block n-p d-flex flex-column">
+             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
+             <div class="tile-bottom-contents">
+              <div class="dark-block-loader"></div>
+              <div class="dark-block-loader"></div>
+            </div>
+           </div>
          </div>
-        </div>
-        </div>
         </div>   
       </div>
     </div>