feat(SFOX): loading state while fetching plaid bank accounts

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

Hide file tree

Showing 2 changed files with 12 additions and 0 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
@@ -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
@@ -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} />