Fix spinner layout

2 files changed, 16 insertions, 9 deletions

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,
+      })
   }
 }