From 05f30c4d449d59d5719fa41d29eab012fdab56fd Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Fri, 21 Sep 2018 18:59:31 +0200 Subject: [PATCH] fix(loading): fix glitch on loading sequence The loading bolt was being shown in several distinct places, which was resulting in a glitch between completing onboarding and showing the wallet ui. Refactor such that the LoadingBolt component is only mounted once, in the root component. --- app/components/Activity/Activity.js | 7 +- app/components/App/App.js | 9 +-- app/components/LoadingBolt/LoadingBolt.js | 4 +- app/containers/App.js | 3 +- app/containers/Root.js | 94 ++++++++++++++--------- 5 files changed, 64 insertions(+), 53 deletions(-) diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js index 08f1a632..64aa8ac7 100644 --- a/app/components/Activity/Activity.js +++ b/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 + return null } const refreshClicked = () => { diff --git a/app/components/App/App.js b/app/components/App/App.js index 6aa8a4e8..096156fb 100644 --- a/app/components/App/App.js +++ b/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 + 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, diff --git a/app/components/LoadingBolt/LoadingBolt.js b/app/components/LoadingBolt/LoadingBolt.js index 03e413bb..b4ca69d7 100644 --- a/app/components/LoadingBolt/LoadingBolt.js +++ b/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 (
- + {visible && (springStyles => ( diff --git a/app/containers/App.js b/app/containers/App.js index ef6387e4..d893b948 100644 --- a/app/containers/App.js +++ b/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, diff --git a/app/containers/Root.js b/app/containers/Root.js index 8c69cd41..7adf870d 100644 --- a/app/containers/Root.js +++ b/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 ( -
- - - -
- ) +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 - } + 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 - } + if (!onboardingProps.onboarding.onboarded) { + return ( +
+ + + +
+ ) + } + + // If we are syncing show the syncing screen. + if ( + lnd.lightningGrpcActive && + onboardingProps.onboarding.connectionType === 'local' && + lnd.syncStatus !== 'complete' + ) { + return + } - return ( - - - - - - - - ) + return ( + +
+ + + + + + +
+ + ) + } } 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,