Fix spinner layout

4 files changed, 26 insertions, 24 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 827b4e9ce..e462701fa 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -137,8 +137,6 @@ class App extends Component {
           loadingMessage: loadMessage,
         }),
 
-        // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
-
         // content
         this.renderRoutes(),
       ])
@@ -302,17 +300,6 @@ class App extends Component {
     )
   }
 
-  renderLoadingIndicator ({ isLoading, isLoadingNetwork, loadMessage }) {
-    const { isMascara } = this.props
-
-    return isMascara
-      ? null
-      : h(Loading, {
-        isLoading: isLoading || isLoadingNetwork,
-        loadingMessage: loadMessage,
-      })
-  }
-
   toggleMetamaskActive () {
     if (!this.props.isUnlocked) {
       // currently inactive: redirect to password box
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index cb6fa51fb..b9afc550f 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
+const classnames = require('classnames')
 
 class LoadingIndicator extends Component {
   renderMessage () {
@@ -10,14 +11,16 @@ class LoadingIndicator extends Component {
 
   render () {
     return (
-      h('.full-flex-height.loading-overlay', {}, [
-        h('img', {
-          src: 'images/loading.svg',
-        }),
+      h('.loading-overlay', {
+        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
+      }, [
+        h('.flex-center.flex-column', [
+          h('img', {
+            src: 'images/loading.svg',
+          }),
 
-        h('br'),
-
-        this.renderMessage(),
+          this.renderMessage(),
+        ]),
       ])
     )
   }
@@ -25,6 +28,7 @@ class LoadingIndicator extends Component {
 
 LoadingIndicator.propTypes = {
   loadingMessage: PropTypes.string,
+  fullScreen: PropTypes.bool,
 }
 
 module.exports = LoadingIndicator
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index dc496a8d8..6ee83ba7e 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -142,7 +142,8 @@ PendingTx.prototype.render = function () {
 
   if (isFetching) {
     return h(Loading, {
-      loadingMessage: this.context.t('estimatingTransaction'),
+      fullScreen: true,
+      loadingMessage: this.context.t('generatingTransaction'),
     })
   }
 
@@ -168,7 +169,9 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h(Loading)
+      return h(Loading, {
+        fullScreen: true,
+      })
   }
 }
 
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index 15009c1e6..a92fffec5 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,13 +1,14 @@
 .loading-overlay {
-  left: 0px;
+  left: 0;
   z-index: 50;
   position: absolute;
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex: 1 1 auto;
   width: 100%;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, .8);
 
   @media screen and (max-width: 575px) {
     margin-top: 56px;
@@ -18,4 +19,11 @@
     margin-top: 75px;
     height: calc(100% - 75px);
   }
+
+  &--full-screen {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    margin-top: 0;
+  }
 }