From 661353e58904e75820d3569f29b96387aeead254 Mon Sep 17 00:00:00 2001
From: Philip Welber <welber@blockchain.com>
Date: Tue, 19 Jun 2018 17:00:55 -0400
Subject: [PATCH] feat(SFOX): loading state while fetching plaid bank accounts

---
 .../src/modals/SfoxExchangeData/Link/index.js              | 7 +++++++
 .../src/modals/SfoxExchangeData/Link/template.js           | 5 +++++
 2 files changed, 12 insertions(+)

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 b413f959df4..228d041d850 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
@@ -30,6 +30,7 @@ class LinkContainer extends Component {
       if (e.data.command === 'enablePlaid') this.setState({ enablePlaid: true })
       if (e.data.command === 'disablePlaid') this.setState({ enablePlaid: false })
       if (e.data.command === 'getBankAccounts' && e.data.msg) {
+        this.props.sfoxFrontendActions.sfoxLoading()
         this.props.sfoxDataActions.getBankAccounts(e.data.msg)
         this.setState({ enablePlaid: false, token: e.data.msg })
         this.props.updateUI({ selectBank: true })
@@ -41,6 +42,12 @@ class LinkContainer extends Component {
     document.getElementById('plaid').onload = (e) => this.props.sfoxFrontendActions.sfoxSuccess()
   }
 
+  componentDidUpdate () {
+    if (Remote.Success.is(this.props.bankAccounts) && Remote.Loading.is(this.props.linkStatus)) {
+      this.props.sfoxFrontendActions.sfoxSuccess()
+    }
+  }
+
   onSetBankAccount (data) {
     const bankChoice = merge(data, {token: this.state.token})
     this.props.sfoxFrontendActions.setBankAccount(bankChoice)
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 075f25c9609..324217cac1f 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
@@ -149,6 +149,11 @@ const BankLink = (props) => {
         {...props}
       />
     } else if (bankAccounts) {
+      if (busy) {
+        return (
+          <HeartbeatLoader height='40px' width='40px' color='brand-secondary' />
+        )
+      }
       return <BankAccounts data={bankAccounts.data} onSetBankAccount={onSetBankAccount} onBankSelection={handleBankSelection} handleNameChange={onNameChange} />
     } else if (ui.microDeposits) {
       return <MicroDeposits onStep={microStep} />