From c1fb2178f0644b6dde4b38b0ffa209c084d10bae Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Wed, 14 Aug 2019 19:00:25 +0300
Subject: [PATCH] Network icons preload

---
 CHANGELOG.md                                  |  1 +
 .../assets/css/_images-preload.scss           | 14 +++++++++
 apps/block_scout_web/assets/css/app.scss      |  1 +
 .../css/components/_network-selector.scss     | 31 +++++++++++++++++++
 .../layout/_network_selector_item.html.eex    |  2 +-
 5 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 apps/block_scout_web/assets/css/_images-preload.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5ea36e249..b3919f00ed 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/block_scout_web/assets/css/_images-preload.scss b/apps/block_scout_web/assets/css/_images-preload.scss
new file mode 100644
index 0000000000..ee25dbd966
--- /dev/null
+++ b/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)
+};
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index 4bc13bd0bc..508bb5335b 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/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";
diff --git a/apps/block_scout_web/assets/css/components/_network-selector.scss b/apps/block_scout_web/assets/css/components/_network-selector.scss
index e8b5f72e78..65e5437641 100644
--- a/apps/block_scout_web/assets/css/components/_network-selector.scss
+++ b/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 {
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
index 55ea7a6023..74ab4ed7ba 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
+++ b/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>