Network icons preload

CHANGELOG.md

@@ -4,6 +4,7 @@
 - [#2497](https://github.com/poanetwork/blockscout/pull/2497) - Add generic Ordered Cache behaviour and implementation
 
 ### Fixes
+- [#2570](https://github.com/poanetwork/blockscout/pull/2570) - Network icons preload
 - [#2564](https://github.com/poanetwork/blockscout/pull/2564) - fix first page button for uncles and reorgs
 - [#2563](https://github.com/poanetwork/blockscout/pull/2563) - Fix view less transfers button
 - [#2538](https://github.com/poanetwork/blockscout/pull/2538) - fetch the last not empty coin balance records

apps/block_scout_web/assets/css/_images-preload.scss

@@ -0,0 +1,14 @@
+body:after {
+	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
+	content:
+		url(/images/network-selector-icons/callisto-mainnet.png)
+		url(/images/network-selector-icons/ethereum-classic.png)
+		url(/images/network-selector-icons/goerli-testnet.png)
+		url(/images/network-selector-icons/kovan-testnet.png)
+		url(/images/network-selector-icons/poa-core.png)
+		url(/images/network-selector-icons/poa-sokol.png)
+		url(/images/network-selector-icons/rinkeby-testnet.png)
+		url(/images/network-selector-icons/rsk-mainnet.png)
+		url(/images/network-selector-icons/ropsten-testnet.png)
+		url(/images/network-selector-icons/xdai-chain.png)
+};

apps/block_scout_web/assets/css/app.scss

@@ -60,6 +60,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 // Custom SCSS
 @import "layout";
 @import "typography";
+@import "images-preload";
 @import "code";
 @import "helpers";
 @import "elements";

apps/block_scout_web/assets/css/components/_network-selector.scss

@@ -243,6 +243,37 @@ $network-selector-item-icon-dimensions: 30px !default;
   height: $network-selector-item-icon-dimensions;
   margin: 0 15px 0 0;
   width: $network-selector-item-icon-dimensions;
+
+  &-callisto-mainnet {
+    background-image: url(/images/network-selector-icons/callisto-mainnet.png)
+  }
+  &-ethereum-classic {
+    background-image: url(/images/network-selector-icons/ethereum-classic.png)
+  }
+  &-goerli-testnet {
+    background-image: url(/images/network-selector-icons/goerli-testnet.png)
+  }
+  &-kovan-testnet {
+    background-image: url(/images/network-selector-icons/kovan-testnet.png)
+  }
+  &-poa-core {
+    background-image: url(/images/network-selector-icons/poa-core.png)
+  }
+  &-poa-sokol {
+    background-image: url(/images/network-selector-icons/poa-sokol.png)
+  }
+  &-rinkeby-testnet {
+    background-image: url(/images/network-selector-icons/rinkeby-testnet.png)
+  }
+  &-rsk-mainnet {
+    background-image: url(/images/network-selector-icons/rsk-mainnet.png)
+  }
+  &-ropsten-testnet {
+    background-image: url(/images/network-selector-icons/ropsten-testnet.png)
+  }
+  &-xdai-chain {
+    background-image: url(/images/network-selector-icons/xdai-chain.png)
+  }
 }
 
 .network-selector-item-title {

apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex

@@ -5,7 +5,7 @@
             <span class="radio-icon"></span>
         </span>
         <span class="network-selector-item-content">
-            <span class='network-selector-item-icon network-selector-item-icon-<%= String.downcase(String.replace(@title, " ", "-")) %>' style="background-image: url('/images/network-selector-icons/<%= String.downcase(String.replace(@title, " ", "-")) %>.png');"></span>
+            <span class='network-selector-item-icon network-selector-item-icon-<%= String.downcase(String.replace(@title, " ", "-")) %>'></span>
             <span class="network-selector-item-title">
                 <%= @title %>
             </span>