Fix loading animation not showing on network change

4 files changed, 38 insertions, 46 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index cf82248e4..ae38fad7f 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -137,8 +137,7 @@ App.prototype.render = function () {
 
       h(AccountMenu),
 
-      h(Loading, {
-        isLoading: isLoading || isLoadingNetwork,
+      (isLoading || isLoadingNetwork) && h(Loading, {
         loadingMessage: loadMessage,
       }),
 
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 6cf6e9eb9..a36f41df5 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -87,7 +87,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
           left: '49vw',
         },
       }, [
-        h(Loading, { isLoading }),
+        isLoading && h(Loading),
       ]),
 
       // account panel
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 163792584..e6d841aa0 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,45 +1,38 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
 
-
-inherits(LoadingIndicator, Component)
-module.exports = LoadingIndicator
-
-function LoadingIndicator () {
-  Component.call(this)
-}
-
-LoadingIndicator.prototype.render = function () {
-  const { isLoading, loadingMessage } = this.props
-
-  return (
-    isLoading ? h('.full-flex-height', {
-      style: {
-        left: '0px',
-        zIndex: 10,
-        position: 'absolute',
-        flexDirection: 'column',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        width: '100%',
-        background: 'rgba(255, 255, 255, 0.8)',
-      },
-    }, [
-      h('img', {
-        src: 'images/loading.svg',
-      }),
-
-      h('br'),
-
-      showMessageIfAny(loadingMessage),
-    ]) : null
-  )
+class LoadingIndicator extends Component {
+  renderMessage () {
+    const { loadingMessage } = this.props
+    return loadingMessage && h('span', loadingMessage)
+  }
+
+  render () {
+    return (
+      h('.full-flex-height', {
+        style: {
+          left: '0px',
+          zIndex: 50,
+          position: 'absolute',
+          flexDirection: 'column',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.8)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+
+        h('br'),
+
+        this.renderMessage(),
+      ])
+    )
+  }
 }
 
-function showMessageIfAny (loadingMessage) {
-  if (!loadingMessage) return null
-  return h('span', loadingMessage)
-}
+module.exports = LoadingIndicator
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index f201010fc..dfa6f88c4 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -84,7 +84,7 @@ ConfirmTxScreen.prototype.render = function () {
   */
 
   log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
-  if (unconfTxList.length === 0) return h(Loading, { isLoading: true })
+  if (unconfTxList.length === 0) return h(Loading)
 
   return currentTxView({
     // Properties
@@ -130,7 +130,7 @@ function currentTxView (opts) {
       return h(PendingTypedMsg, opts)
     }
   }
-  return h(Loading, { isLoading: true })
+  return h(Loading)
 }
 
 ConfirmTxScreen.prototype.buyEth = function (address, event) {