Add network loading indication

2 files changed, 14 insertions, 0 deletions

diff --git a/app/scripts/lib/idStore.js b/app/scripts/lib/idStore.js
index 4ce4fd6f2..7f2659381 100644
--- a/app/scripts/lib/idStore.js
+++ b/app/scripts/lib/idStore.js
@@ -131,8 +131,10 @@ IdentityStore.prototype.revealAccount = function(cb) {
 }
 
 IdentityStore.prototype.getNetwork = function(tries) {
+
   if (tries === 0) {
     this._currentState.network = 'error'
+    this._didUpdate()
     return
   }
   this.web3.version.getNetwork((err, network) => {
@@ -140,7 +142,11 @@ IdentityStore.prototype.getNetwork = function(tries) {
       return this.getNetwork(tries - 1, cb)
     }
     this._currentState.network = network
+    this._didUpdate()
   })
+
+  this._currentState.network = 'loading'
+  this._didUpdate()
 }
 
 IdentityStore.prototype.setLocked = function(cb){
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 5f507f630..90c307ed6 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -19,6 +19,14 @@ Network.prototype.render = function() {
   if (networkNumber == undefined || networkNumber == "error") {
     hoverText = 'No Blockchain Connection'
     iconName = 'no-connection'
+  } else if (networkNumber ==  'loading') {
+    return h('img', {
+      title: 'Contacting network...',
+      style: {
+        width: '27px',
+      },
+      src: 'images/loading.svg',
+    })
   } else if (networkNumber ==  1) {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'