From 47501a6f7ad092f9d941fffac1b3b5cc557c65c3 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 5 Dec 2018 02:45:45 -0330
Subject: Add spinner and dropdown arrow to network indicator on custom network
 loading.

---
 .../dropdowns/components/network-dropdown-icon.js  | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
index a45da4c10..d4a2c2ff7 100644
--- a/ui/app/components/dropdowns/components/network-dropdown-icon.js
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -16,16 +16,32 @@ NetworkDropdownIcon.prototype.render = function () {
     isSelected,
     innerBorder = 'none',
     diameter = '12',
+    loading,
   } = this.props
 
-  return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
-    h('div', {
+  return loading
+    ? h('span.pointer.network-indicator', {
       style: {
-        background: backgroundColor,
-        border: innerBorder,
-        height: `${diameter}px`,
-        width: `${diameter}px`,
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
       },
-    })
-  )
+    }, [
+      h('img', {
+        style: {
+          width: '27px',
+        },
+        src: 'images/loading.svg',
+      }),
+    ])
+    : h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
+      h('div', {
+        style: {
+          background: backgroundColor,
+          border: innerBorder,
+          height: `${diameter}px`,
+          width: `${diameter}px`,
+        },
+      })
+    )
 }
-- 
cgit