From da250843cc82f470d53f099b1952585bcef7131b Mon Sep 17 00:00:00 2001
From: Philip Welber <welber@blockchain.com>
Date: Tue, 19 Jun 2018 16:27:38 -0400
Subject: [PATCH] feat(SFOX): ensure plaid and manually link button show at the
 same time

---
 .../src/modals/SfoxExchangeData/Link/index.js |  3 +++
 .../modals/SfoxExchangeData/Link/template.js  | 27 ++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/index.js
index 6e4893d2b02..b413f959df4 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/index.js
@@ -36,6 +36,9 @@ class LinkContainer extends Component {
       }
     }
     window.addEventListener('message', receiveMessage, false)
+
+    this.props.sfoxFrontendActions.sfoxLoading()
+    document.getElementById('plaid').onload = (e) => this.props.sfoxFrontendActions.sfoxSuccess()
   }
 
   onSetBankAccount (data) {
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/template.js
index 05ad6de6d28..075f25c9609 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/template.js
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Link/template.js
@@ -29,6 +29,14 @@ const ButtonContainer = styled.div`
   width: 75%;
   margin-top: 20px;
 `
+const BusyWrapper = styled.div`
+  display: ${props => !props.show ? 'flex' : 'none'};
+  flex-direction: column;
+`
+const LoaderWrapper = styled.div`
+  display: ${props => props.show ? 'flex' : 'none'};
+  justify-content: center;
+`
 const OrText = styled.p`
   color: rgba(151,151,151,0.5);
   margin: 10px 0px 15px 0px;
@@ -147,13 +155,18 @@ const BankLink = (props) => {
     } else {
       return (
         <ButtonContainer>
-          <PlaidFrame enablePlaid={enablePlaid} plaidUrl={plaidUrl} />
-          <OrText>
-            <FormattedMessage id='sfoxexchangedata.link.or' defaultMessage='or' />
-          </OrText>
-          <Button onClick={toggleManual}>
-            <FormattedMessage id='sfoxexchangedata.link.userouting' defaultMessage='Use Routing and Account Number' />
-          </Button>
+          <LoaderWrapper show={busy}>
+            <HeartbeatLoader height='40px' width='40px' color='brand-secondary' />
+          </LoaderWrapper>
+          <BusyWrapper show={busy}>
+            <PlaidFrame enablePlaid={enablePlaid} plaidUrl={plaidUrl} />
+            <OrText>
+              <FormattedMessage id='sfoxexchangedata.link.or' defaultMessage='or' />
+            </OrText>
+            <Button onClick={toggleManual}>
+              <FormattedMessage id='sfoxexchangedata.link.userouting' defaultMessage='Use Routing and Account Number' />
+            </Button>
+          </BusyWrapper>
         </ButtonContainer>
       )
     }