Add spinner and dropdown arrow to network indicator on custom network loading.

2 files changed, 47 insertions, 27 deletions

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`,
+        },
+      })
+    )
 }
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 611aadb7b..ce042377d 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -32,24 +32,7 @@ Network.prototype.render = function () {
   }
   let iconName, hoverText
 
-  if (networkNumber === 'loading') {
-    return h('span.pointer.network-indicator', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-      },
-      onClick: (event) => this.props.onClick(event),
-    }, [
-      h('img', {
-        title: context.t('attemptingConnect'),
-        style: {
-          width: '27px',
-        },
-        src: 'images/loading.svg',
-      }),
-    ])
-  } else if (providerName === 'mainnet') {
+  if (providerName === 'mainnet') {
     hoverText = context.t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
@@ -92,6 +75,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -101,6 +85,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('ropsten')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -110,6 +95,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('kovan')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -119,13 +105,31 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('rinkeby')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
-              h('i.fa.fa-question-circle.fa-lg', {
+              networkNumber === 'loading'
+              ? h('span.pointer.network-indicator', {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                },
+                onClick: (event) => this.props.onClick(event),
+              }, [
+                h('img', {
+                  title: context.t('attemptingConnect'),
+                  style: {
+                    width: '27px',
+                  },
+                  src: 'images/loading.svg',
+                }),
+              ])
+              : h('i.fa.fa-question-circle.fa-lg', {
                 style: {
                   margin: '10px',
                   color: 'rgb(125, 128, 130)',