Merge pull request #814 from mrfelton/fix/loading-glitch

fix(loading): fix glitch on loading sequence

app/components/Activity/Activity.js

@@ -8,7 +8,6 @@ import FaRepeat from 'react-icons/lib/fa/repeat'
 import { FormattedMessage, injectIntl } from 'react-intl'
 
 import Wallet from 'components/Wallet'
-import LoadingBolt from 'components/LoadingBolt'
 import Invoice from './Invoice'
 import Payment from './Payment'
 import Transaction from './Transaction'
@@ -102,13 +101,11 @@ class Activity extends Component {
       updateSearchActive,
       updateSearchText,
       walletProps,
-      intl,
-
-      settings
+      intl
     } = this.props
 
     if (balance.channelBalance === null || balance.walletBalance === null) {
-      return <LoadingBolt theme={settings.theme} />
+      return null
     }
 
     const refreshClicked = () => {

app/components/App/App.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import GlobalError from 'components/GlobalError'
-import LoadingBolt from 'components/LoadingBolt'
 
 import Form from 'components/Form'
 import ChannelForm from 'components/Contacts/ChannelForm'
@@ -16,10 +15,7 @@ import styles from './App.scss'
 
 class App extends Component {
   componentWillMount() {
-    const { fetchTicker, fetchInfo, fetchSuggestedNodes, fetchDescribeNetwork } = this.props
-
-    // fetch price ticker
-    fetchTicker()
+    const { fetchInfo, fetchSuggestedNodes, fetchDescribeNetwork } = this.props
     // fetch node info
     fetchInfo()
     // fetch suggested nodes list from zap.jackmallers.com/suggested-peers
@@ -51,7 +47,7 @@ class App extends Component {
     } = this.props
 
     if (!currentTicker) {
-      return <LoadingBolt theme={settings.theme} />
+      return null
     }
 
     return (
@@ -91,7 +87,6 @@ App.propTypes = {
   channelFormProps: PropTypes.object,
 
   fetchInfo: PropTypes.func.isRequired,
-  fetchTicker: PropTypes.func.isRequired,
   clearError: PropTypes.func.isRequired,
   fetchDescribeNetwork: PropTypes.func.isRequired,
   fetchSuggestedNodes: PropTypes.func.isRequired,

app/components/LoadingBolt/LoadingBolt.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
-import { Transition, animated, config } from 'react-spring'
+import { Transition, animated } from 'react-spring'
 import cloudLightningIcon from 'icons/cloud_lightning.svg'
 
 import { FormattedMessage } from 'react-intl'
@@ -14,7 +14,7 @@ class LoadingBolt extends React.PureComponent {
     const { theme, visible = true } = this.props
     return (
       <div>
-        <Transition enter={{ opacity: 1 }} leave={{ opacity: 0 }} config={config.slow} native>
+        <Transition enter={{ opacity: 1 }} leave={{ opacity: 0 }} native>
           {visible &&
             (springStyles => (
               <animated.div style={springStyles} className={`${styles.container} ${theme}`}>

app/containers/App.js

@@ -4,7 +4,7 @@ import get from 'lodash.get'
 
 import { btc } from 'lib/utils'
 
-import { fetchTicker, setCurrency, tickerSelectors } from 'reducers/ticker'
+import { setCurrency, tickerSelectors } from 'reducers/ticker'
 
 import { closeWalletModal } from 'reducers/address'
 
@@ -80,7 +80,6 @@ import {
 import App from 'components/App'
 
 const mapDispatchToProps = {
-  fetchTicker,
   setCurrency,
 
   closeWalletModal,

app/containers/Root.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'
 import { Switch, Route } from 'react-router'
@@ -29,6 +29,7 @@ import {
   updateRecoverSeedInput,
   setReEnterSeedIndexes
 } from 'reducers/onboarding'
+import { fetchTicker, tickerSelectors } from 'reducers/ticker'
 import { lndSelectors } from 'reducers/lnd'
 import { walletAddress } from 'reducers/address'
 import LoadingBolt from 'components/LoadingBolt'
@@ -60,7 +61,8 @@ const mapDispatchToProps = {
   walletAddress,
   updateReEnterSeedInput,
   updateRecoverSeedInput,
-  setReEnterSeedIndexes
+  setReEnterSeedIndexes,
+  fetchTicker
 }
 
 const mapStateToProps = state => ({
@@ -69,7 +71,8 @@ const mapStateToProps = state => ({
   address: state.address,
   info: state.info,
   theme: state.settings.theme,
-
+  balance: state.balance,
+  currentTicker: tickerSelectors.currentTicker(state),
   syncPercentage: lndSelectors.syncPercentage(state),
   passwordIsValid: onboardingSelectors.passwordIsValid(state),
   passwordMinCharsError: onboardingSelectors.passwordMinCharsError(state),
@@ -208,47 +211,64 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   }
 }
 
-const Root = ({ history, lnd, onboardingProps, syncingProps }) => {
-  // If we are have not yet onboarded, show the loading/onboarding screen.
-  if (!onboardingProps.onboarding.onboarded) {
-    return (
-      <div>
-        <LoadingBolt
-          theme={onboardingProps.theme}
-          visible={!onboardingProps.onboarding.onboarding}
-        />
-        <Onboarding {...onboardingProps} />
-        <Syncing {...syncingProps} />
-      </div>
-    )
+class Root extends Component {
+  componentWillMount() {
+    const { fetchTicker } = this.props
+    fetchTicker()
   }
 
-  // If we are syncing show the syncing screen.
-  if (
-    lnd.lightningGrpcActive &&
-    onboardingProps.onboarding.connectionType === 'local' &&
-    lnd.syncStatus !== 'complete'
-  ) {
-    return <Syncing {...syncingProps} />
-  }
+  render() {
+    const { balance, currentTicker, history, lnd, onboardingProps, syncingProps } = this.props
 
-  // Don't launch the app without a connection to lnd.
-  if (!lnd.lightningGrpcActive && !lnd.walletUnlockerGrpcActive) {
-    return <LoadingBolt theme={onboardingProps.theme} />
-  }
+    if (!onboardingProps.onboarding.onboarded) {
+      return (
+        <div>
+          <LoadingBolt
+            theme={onboardingProps.theme}
+            visible={!onboardingProps.onboarding.onboarding}
+          />
+          <Onboarding {...onboardingProps} />
+          <Syncing {...syncingProps} />
+        </div>
+      )
+    }
+
+    // If we are syncing show the syncing screen.
+    if (
+      lnd.lightningGrpcActive &&
+      onboardingProps.onboarding.connectionType === 'local' &&
+      lnd.syncStatus !== 'complete'
+    ) {
+      return <Syncing {...syncingProps} />
+    }
 
-  return (
-    <ConnectedRouter history={history}>
-      <App>
-        <Switch>
-          <Route path="/" component={Activity} />
-        </Switch>
-      </App>
-    </ConnectedRouter>
-  )
+    return (
+      <ConnectedRouter history={history}>
+        <div>
+          <LoadingBolt
+            theme={onboardingProps.theme}
+            visible={
+              (!lnd.lightningGrpcActive && !lnd.walletUnlockerGrpcActive) ||
+              !currentTicker ||
+              balance.channelBalance === null ||
+              balance.walletBalance === null
+            }
+          />
+          <App>
+            <Switch>
+              <Route path="/" component={Activity} />
+            </Switch>
+          </App>
+        </div>
+      </ConnectedRouter>
+    )
+  }
 }
 
 Root.propTypes = {
+  balance: PropTypes.object.isRequired,
+  fetchTicker: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object,
   history: PropTypes.object.isRequired,
   lnd: PropTypes.object.isRequired,
   onboardingProps: PropTypes.object.isRequired,