Place loaders

CHANGELOG.md

@@ -8,9 +8,9 @@
 - [#2294](https://github.com/poanetwork/blockscout/pull/2294) - add healthy block period checking endpoint
 
 ### Fixes
+- [#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
-- [#2393](https://github.com/poanetwork/blockscout/pull/2393) - added templates for table loader and tile loader
 - [#2389](https://github.com/poanetwork/blockscout/pull/2389) - Reduce Lodash lib size (86% of lib methods are not used)
 - [#2378](https://github.com/poanetwork/blockscout/pull/2378) - Page performance: exclude moment.js localization files except EN, remove unused css
 - [#2368](https://github.com/poanetwork/blockscout/pull/2368) - add two columns of smart contract info

apps/block_scout_web/assets/package-lock.json

@@ -3816,7 +3816,8 @@
           "version": "2.1.1",
           "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3840,13 +3841,15 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3863,19 +3866,22 @@
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4006,7 +4012,8 @@
           "version": "2.0.3",
           "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4020,6 +4027,7 @@
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4036,6 +4044,7 @@
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4044,13 +4053,15 @@
           "version": "0.0.8",
           "resolved": false,
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": false,
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4071,6 +4082,7 @@
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4159,7 +4171,8 @@
           "version": "1.0.1",
           "resolved": false,
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4173,6 +4186,7 @@
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4268,7 +4282,8 @@
           "version": "5.1.1",
           "resolved": false,
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4310,6 +4325,7 @@
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4331,6 +4347,7 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4379,13 +4396,15 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

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">
-					<!-- include table loader here -->
+					<%= 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,7 +117,6 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-        <!-- include tile loader here -->
       </span>
     </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-items data-selector="transactions-pending-list">
-      <div data-loading-message class="tile tile-muted text-center mt-3" style="display: none;">
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
-        <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, "_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

@@ -1077,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"
@@ -1276,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 ""
 
@@ -1744,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_token/index.html.eex:28
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: 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_token/index.html.eex:28
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
 msgid "CSV"
 msgstr ""