add a `x` close button to gas calc loding screen on conf-tx

2 files changed, 16 insertions, 2 deletions

diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 163792584..b8e2eb599 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -11,7 +11,7 @@ function LoadingIndicator () {
 }
 
 LoadingIndicator.prototype.render = function () {
-  const { isLoading, loadingMessage } = this.props
+  const { isLoading, loadingMessage, canBypass, bypass } = this.props
 
   return (
     isLoading ? h('.full-flex-height', {
@@ -28,6 +28,16 @@ LoadingIndicator.prototype.render = function () {
         background: 'rgba(255, 255, 255, 0.8)',
       },
     }, [
+      canBypass ? h( 'i.fa.fa-close.cursor-pointer.close-loading', {
+        style: {
+          position: 'absolute',
+          top: '1px',
+          right: '15px',
+          color: '#AEAEAE',
+        },
+        onClick: bypass,
+      }) : null,
+
       h('img', {
         src: 'images/loading.svg',
       }),
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index ce4d153b5..9c8f98fa8 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -62,8 +62,12 @@ ConfirmTxScreen.prototype.render = function () {
     h('.flex-column.flex-grow', [
 
       h(LoadingIndicator, {
-        isLoading: txData.loadingDefaults,
+        isLoading: this.state ? !this.state.bypassLoadingScreen : txData.loadingDefaults,
         loadingMessage: 'Estimating transaction cost…',
+        canBypass: true,
+        bypass: () => {
+          this.setState({bypassLoadingScreen: true})
+        },
       }),
 
       // subtitle and nav