feat(SFOX): ensure plaid and manually link button show at the same time

blockchain · Jun 19, 2018 · da25084 · da25084
1 parent d3c203e
commit da25084
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 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
@@ -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
@@ -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>
       )
     }