Merge pull request #2405 from poanetwork/loader

Tiles and table loaders for all views

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 ### Fixes
 - [#2410](https://github.com/poanetwork/blockscout/pull/2410) - preload smart contract for logs decoding
+- [#2405](https://github.com/poanetwork/blockscout/pull/2405) - added templates for table loader and tile loader
 - [#2398](https://github.com/poanetwork/blockscout/pull/2398) - show only one decoded candidate
 - [#2395](https://github.com/poanetwork/blockscout/pull/2395) - new block loading animation
 - [#2389](https://github.com/poanetwork/blockscout/pull/2389) - Reduce Lodash lib size (86% of lib methods are not used)

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -26,6 +26,43 @@ $stakes-table-cell-separation: 25px !default;
   }
 }
 
+// Loader
+.table-content-loader {
+  display: inline-block;
+  height: 24px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: '';
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: placeholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+@keyframes placeholderAnimate {
+  0%{ background-position: -650px 0; }
+  100% { background-position: 650px 0; }
+}
+
+.table-content-pseudo {
+  td {
+    &:last-child {
+      padding-right: 24px !important;
+    }
+  }
+}
+
 .stakes-table {
   min-width: fit-content;
   width: 100%;

apps/block_scout_web/assets/css/components/_tile.scss

@@ -349,6 +349,52 @@ $tile-body-a-color: #5959d8 !default;
   }
 }
 
+// Loader
+.tile-type-loading {
+  background-color: #fff;
+  padding-top: 30px;
+  padding-bottom: 28px;
+}
+
+.tile-loader {
+  display: inline-block;
+  height: 20px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: '';
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: tilePlaceholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+.tile-label-loader {
+  height: 14px;
+  width: 80px;
+}
+
+.tile-address-loader {
+  & + .tile-address-loader {
+    margin-top: 6px;
+  }
+}
+
+@keyframes tilePlaceholderAnimate {
+  0%{ background-position: -650px 0; }
+  100% { background-position: 650px 0; }
+}
+
 // Loading Animation
 
 @keyframes playBlockLoadingAnimation {
@@ -512,4 +558,4 @@ $cube-quantity: 5;
   100% {
     transform: scale(0);
   }
-}
+}

apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex

@@ -38,7 +38,7 @@
 					</tr>
 				</thead>
 				<tbody data-items data-selector="top-addresses-list">
-					
+					<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html" %>
 				</tbody>
 			</table>
 		</div>

apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex

@@ -40,7 +40,9 @@
           </div>
         </div>
 
-        <div data-selector="coin-balances-list" data-items></div>
+        <div data-selector="coin-balances-list" data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex

@@ -66,7 +66,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex

@@ -27,7 +27,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex

@@ -19,7 +19,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <div class="transaction-bottom-panel">
           <div csv-download class="download-all-transactions">

apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex

@@ -21,7 +21,9 @@
           </span>
         </button>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex

@@ -65,7 +65,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <div class="transaction-bottom-panel">
           <div class="download-all-transactions">

apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex

@@ -22,7 +22,9 @@
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
-        <div data-items data-selector="validations-list"></div>
+        <div data-items data-selector="validations-list">
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex

@@ -11,7 +11,9 @@
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <div data-items></div>
+      <div data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
       <div data-empty-response-message style="display: none;">
           <span><%= gettext "There are no blocks." %></span>
       </div>

apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex

@@ -29,7 +29,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -117,13 +117,7 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-        <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>
-          </span>
-          <%= gettext("Loading...") %>
-        </div>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
       </span>
     </div>
   </div>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_table-loader.html.eex

@@ -0,0 +1,85 @@
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex

@@ -0,0 +1,72 @@
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>

apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex

@@ -23,13 +23,8 @@
           <%= gettext "There are no pending transactions." %>
         </span>
       </div>
-      <div data-items data-selector="transactions-pending-list"></div>
-      <div data-loading-message class="tile tile-muted text-center mt-3" style="display: none;">
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
+      <div data-items data-selector="transactions-pending-list">
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
       </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex

@@ -28,7 +28,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex

@@ -27,7 +27,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex

@@ -26,7 +26,9 @@
           </span>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex

@@ -28,7 +28,9 @@
         </div>
       </div>
 
-      <div data-selector="transactions-list" data-items></div>
+      <div data-selector="transactions-list" data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex

@@ -16,7 +16,9 @@
         </div>
       </div>
 
-      <div data-items></div>
+      <div data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
     </div>

apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex

@@ -19,7 +19,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex

@@ -18,7 +18,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/priv/gettext/default.pot

@@ -1058,7 +1058,6 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
 #: lib/block_scout_web/templates/chain/show.html.eex:99
-#: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1078,11 +1077,6 @@ msgstr ""
 msgid "GraphQL"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
-msgid "Loading"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:73
 msgid "RPC"
@@ -1277,7 +1271,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:16
+#: lib/block_scout_web/templates/block/index.html.eex:18
 msgid "There are no blocks."
 msgstr ""
 
@@ -1745,8 +1739,8 @@ msgid "here."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:26
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: lib/block_scout_web/templates/address_token/index.html.eex:28
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
 msgid "CSV"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -34,7 +34,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:21
-#: lib/block_scout_web/templates/chain/_block.html.eex:11
+#: lib/block_scout_web/templates/chain/_block.html.eex:178
 msgid "%{count} Transactions"
 msgstr ""
 
@@ -522,7 +522,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/block/_tile.html.eex:38
 #: lib/block_scout_web/templates/block/overview.html.eex:121
-#: lib/block_scout_web/templates/chain/_block.html.eex:15
+#: lib/block_scout_web/templates/chain/_block.html.eex:182
 msgid "Miner"
 msgstr ""
 
@@ -1040,7 +1040,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/_tile.html.eex:47
-#: lib/block_scout_web/templates/chain/_block.html.eex:23
+#: lib/block_scout_web/templates/chain/_block.html.eex:190
 #: lib/block_scout_web/views/internal_transaction_view.ex:27
 msgid "Reward"
 msgstr ""
@@ -1058,7 +1058,6 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
 #: lib/block_scout_web/templates/chain/show.html.eex:99
-#: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1078,11 +1077,6 @@ msgstr ""
 msgid "GraphQL"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
-msgid "Loading"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:73
 msgid "RPC"
@@ -1277,7 +1271,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:16
+#: lib/block_scout_web/templates/block/index.html.eex:18
 msgid "There are no blocks."
 msgstr ""
 
@@ -1745,8 +1739,8 @@ msgid "here."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:26
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: lib/block_scout_web/templates/address_token/index.html.eex:28
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
 msgid "CSV"
 msgstr ""