fix(syncing): move syncing logic out of application component

app/containers/Root.js

@@ -1,20 +1,48 @@
 // @flow
 import React from 'react'
-import { Provider } from 'react-redux'
+import { Provider, connect } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'
+import { fetchBlockHeight, lndSelectors } from 'reducers/lnd'
+import LndSyncing from 'components/LndSyncing'
 import Routes from '../routes'
 
+const mapDispatchToProps = {
+  fetchBlockHeight
+}
+
+const mapStateToProps = state => ({
+  syncPercentage: lndSelectors.syncPercentage(state)
+})
+
 type RootType = {
   store: {},
   history: {}
 };
 
-export default function Root({ store, history }: RootType) {
-  return (
-    <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <Routes />
-      </ConnectedRouter>
-    </Provider>
-  )
+class Root extends React.Component {
+  render() {
+    const { store, history, fetchBlockHeight, syncPercentage } = this.props
+    const { lnd } = store.getState()
+
+    if (lnd.syncing) {
+      return (
+        <LndSyncing
+          fetchBlockHeight={fetchBlockHeight}
+          fetchingBlockHeight={lnd.fetchingBlockHeight}
+          syncPercentage={syncPercentage}
+        />
+      )
+    }
+
+    return (
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <Routes />
+        </ConnectedRouter>
+      </Provider>
+    )
+  }
 } 
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(Root)

app/routes.js

@@ -14,4 +14,4 @@ export default () => (
       <Route path='/' component={Activity} />
     </Switch>
   </App>
-);
+)

app/routes/app/components/App.js

@@ -13,12 +13,10 @@ class App extends Component {
   componentWillMount() {
     const { fetchTicker, fetchBalance, fetchInfo, newAddress, lnd: { syncing } } = this.props
 
-    if (!syncing) {
-      fetchTicker()
-      fetchBalance()
-      fetchInfo()
-      newAddress('p2pkh')
-    }
+    fetchTicker()
+    fetchBalance()
+    fetchInfo()
+    newAddress('p2pkh')
   }
 
   render() {
@@ -47,16 +45,6 @@ class App extends Component {
       children
     } = this.props
 
-    if (lnd.syncing) {
-      return (
-        <LndSyncing
-          fetchBlockHeight={fetchBlockHeight}
-          fetchingBlockHeight={lnd.fetchingBlockHeight}
-          syncPercentage={syncPercentage}
-        />
-      )
-    }
-
     if (!currentTicker || balance.balanceLoading) { return <LoadingBolt /> }
 
     return (