Show loading indication when selecting ShapeShift

2 files changed, 50 insertions, 0 deletions

diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 7daf41206..b564733b1 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -6,6 +6,7 @@ const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
 const extension = require('../../../app/scripts/lib/extension')
+const Loading = require('./loading')
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
@@ -17,6 +18,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     provider: state.metamask.provider,
     context: state.appState.currentView.context,
+    isSubLoading: state.appState.isSubLoading,
   }
 }
 
@@ -28,6 +30,7 @@ function BuyButtonSubview () {
 BuyButtonSubview.prototype.render = function () {
   const props = this.props
   const currentForm = props.buyView.formView
+  const isLoading = props.isSubLoading
 
   return (
     h('.buy-eth-section', [
@@ -47,6 +50,9 @@ BuyButtonSubview.prototype.render = function () {
         }),
         h('h2.page-subtitle', 'Buy Eth'),
       ]),
+
+      h(Loading, { isLoading }),
+
       h('h3.flex-row.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
new file mode 100644
index 000000000..ae735894f
--- /dev/null
+++ b/ui/app/components/loading.js
@@ -0,0 +1,44 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+
+inherits(LoadingIndicator, Component)
+module.exports = LoadingIndicator
+
+function LoadingIndicator () {
+  Component.call(this)
+}
+
+LoadingIndicator.prototype.render = function () {
+  var isLoading = this.props.isLoading
+
+  return (
+    h(ReactCSSTransitionGroup, {
+      className: 'css-transition-group',
+      transitionName: 'loader',
+      transitionEnterTimeout: 150,
+      transitionLeaveTimeout: 150,
+    }, [
+
+      isLoading ? h('div', {
+        style: {
+          zIndex: 10,
+          position: 'absolute',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.5)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+      ]) : null,
+    ])
+  )
+}
+