Fix styling of the app spinner

2 files changed, 37 insertions, 0 deletions

diff --git a/ui/app/components/loading-screen/index.js b/ui/app/components/loading-screen/index.js
new file mode 100644
index 000000000..191d953f7
--- /dev/null
+++ b/ui/app/components/loading-screen/index.js
@@ -0,0 +1,2 @@
+const LoadingScreen = require('./loading-screen.component')
+module.exports = LoadingScreen
diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js
new file mode 100644
index 000000000..bce2a4aac
--- /dev/null
+++ b/ui/app/components/loading-screen/loading-screen.component.js
@@ -0,0 +1,35 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
+const Spinner = require('../spinner')
+
+class LoadingScreen extends Component {
+  renderMessage () {
+    const { loadingMessage } = this.props
+    return loadingMessage && h('span', loadingMessage)
+  }
+
+  render () {
+    return (
+      h('.loading-overlay', {
+        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
+      }, [
+        h('.loading-overlay__container', [
+          h(Spinner, {
+            color: '#F7C06C',
+          }),
+
+          this.renderMessage(),
+        ]),
+      ])
+    )
+  }
+}
+
+LoadingScreen.propTypes = {
+  loadingMessage: PropTypes.string,
+  fullScreen: PropTypes.bool,
+}
+
+module.exports = LoadingScreen