Merge pull request #673 from LiskHQ/510-loader-wait-for-peer

Show loader until peer is set (second attempt) - Closes #510
LiskHQ · Apr 4, 2018 · 75991ac · 75991ac
2 parents 7654cee + c4110ac
commit 75991ac
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 55 deletions.
diff --git a/src/components/accountTransactions/index.test.js b/src/components/accountTransactions/index.test.js
@@ -36,7 +36,7 @@ describe('AccountTransaction Component', () => {
   });
 
   it('updates transactions on address update', () => {
-    expect(transactionsRequestInitSpy).to.not.have.been.calledWith();
+    expect(transactionsRequestInitSpy).to.have.been.calledWith({ address: '987654321L' });
     wrapper.setProps({ match: { params: { address: '12345L' } } });
     expect(transactionsRequestInitSpy).to.have.been.calledWith({ address: '12345L' });
   });

diff --git a/src/components/app/index.js b/src/components/app/index.js
@@ -26,10 +26,15 @@ import routes from '../../constants/routes';
 import Onboarding from '../onboarding';
 
 class App extends React.Component {
+  constructor() {
+    super();
+    this.state = { loaded: false };
+  }
+
   markAsLoaded() {
     this.main.classList.add(styles.loaded);
     this.main.classList.add('appLoaded');
-    this.appLoaded = true;
+    this.setState({ loaded: true });
   }
 
   startOnboarding() {
@@ -39,46 +44,54 @@ class App extends React.Component {
   render() {
     return (
       <OfflineWrapper>
-        <Onboarding appLoaded={this.appLoaded} onRef={(ref) => { this.onboarding = ref; }}/>
+        <Onboarding appLoaded={this.state.loaded} onRef={(ref) => { this.onboarding = ref; }}/>
         <main className={`${styles.bodyWrapper}`} ref={(el) => { this.main = el; }}>
           <MainMenu startOnboarding={this.startOnboarding.bind(this)}/>
           <Route path={routes.accounts.path} component={SavedAccounts} />
           <section>
             <div className={styles.mainBox}>
-              <Header/>
+              <Header />
               <div id='onboardingAnchor'></div>
               <Switch>
-                <PrivateRoutes path={routes.main.path} render={ ({ match }) => (
-                  <main className={offlineStyle.disableWhenOffline}>
-                    <Switch>
-                      <Route path={`${match.url}${routes.accountVisualDemo.path}`} component={AccountVisualDemo} />
-                      <Route path={`${match.url}${routes.dashboard.path}`} component={Dashboard} />
-                      <Route path={`${match.url}${routes.wallet.path}`} component={TransactionDashboard} />
-                      <Route path={`${match.url}${routes.voting.path}`} component={Voting} />
-                      <Route path={`${match.url}${routes.sidechains.path}`} component={Sidechains} />
-                      <Route path={`${match.url}${routes.secondPassphrase.path}`} component={SecondPassphrase} />
-                      <Route path='*' component={NotFound} />
-                    </Switch>
-                  </main>
-                )} />
-                <Route path={routes.explorer.path} render={ ({ match }) => (
-                  <main>
-                    <Route path={`${match.url}${routes.search.path}`} component={Search} />
-                    <Route path={`${match.url}${routes.searchResult.path}/:query?`} component={SearchResult} />
-                    <Route path={`${match.url}${routes.account.path}/:address?`} component={AccountTransactions} />
-                    <Route path={`${match.url}${routes.transaction.path}/:id`} component={SingleTransaction} />
-                  </main>
-                )} />
+                {this.state.loaded
+                  ?
+                  <PrivateRoutes path={routes.main.path} render={ ({ match }) => (
+                    <main className={offlineStyle.disableWhenOffline}>
+                      <Switch>
+                        <Route path={`${match.url}${routes.accountVisualDemo.path}`} component={AccountVisualDemo} />
+                        <Route path={`${match.url}${routes.dashboard.path}`} component={Dashboard} />
+                        <Route path={`${match.url}${routes.wallet.path}`} component={TransactionDashboard} />
+                        <Route path={`${match.url}${routes.voting.path}`} component={Voting} />
+                        <Route path={`${match.url}${routes.sidechains.path}`} component={Sidechains} />
+                        <Route path={`${match.url}${routes.secondPassphrase.path}`} component={SecondPassphrase} />
+                        <Route path='*' component={NotFound} />
+                      </Switch>
+                    </main>
+                  )} />
+                  : null
+                }
+                {this.state.loaded
+                  ?
+                  <Route path={routes.explorer.path} render={ ({ match }) => (
+                    <main>
+                      <Route path={`${match.url}${routes.search.path}`} component={Search} />
+                      <Route path={`${match.url}${routes.searchResult.path}/:query?`} component={SearchResult} />
+                      <Route path={`${match.url}${routes.account.path}/:address?`} component={AccountTransactions} />
+                      <Route path={`${match.url}${routes.transaction.path}/:id`} component={SingleTransaction} />
+                    </main>
+                  )} />
+                  : null
+                }
                 <Route path={routes.register.path} component={Register} />
                 <Route path={routes.addAccount.path} component={Login} />
                 <Route exact path={routes.login.path} component={Login} />
                 <Route path='*' component={NotFound} />
               </Switch>
             </div>
-            <Toaster />
-            <LoadingBar markAsLoaded={this.markAsLoaded.bind(this)} />
           </section>
+          <Toaster />
         </main>
+        <LoadingBar markAsLoaded={this.markAsLoaded.bind(this)} />
       </OfflineWrapper>
     );
   }

diff --git a/src/components/app/index.test.js b/src/components/app/index.test.js
@@ -51,13 +51,17 @@ describe('App', () => {
     publicComponent.forEach(({ route, component }) => {
       it(`should render ${component.name} component at "${route}" route`, () => {
         const wrapper = navigateTo({ store }, [route]);
+        wrapper.find('LoadingBar').props().markAsLoaded();
+        wrapper.update();
         expect(wrapper.find(component).exists()).to.be.equal(true);
       });
     });
 
     privateComponent.forEach(({ route, component }) => {
       it(`should redirect from ${component.name} component if user is not authenticated`, () => {
         const wrapper = navigateTo({ store }, [route]);
+        wrapper.find('LoadingBar').props().markAsLoaded();
+        wrapper.update();
         expect(wrapper.find(component).exists()).to.be.equal(false);
         expect(wrapper.find(Login).exists()).to.be.equal(true);
       });

diff --git a/src/components/loadingBar/index.js b/src/components/loadingBar/index.js
@@ -4,6 +4,7 @@ import LoadingBar from './loadingBar';
 
 const mapStateToProps = state => ({
   loading: state.loading,
+  peers: state.peers,
 });
 
 export default connect(mapStateToProps)(LoadingBar);

diff --git a/src/components/loadingBar/index.test.js b/src/components/loadingBar/index.test.js
@@ -10,7 +10,7 @@ describe('LoadingBarHOC', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<Provider store={store}><LoadingBarHOC /></Provider>);
+    wrapper = mount(<Provider store={store}><LoadingBarHOC markAsLoaded={() => {}} /></Provider>);
   });
 
   it('should render Send', () => {

diff --git a/src/components/loadingBar/loadingBar.js b/src/components/loadingBar/loadingBar.js
@@ -9,7 +9,14 @@ class LoadingBar extends React.Component {
     this.markedAsLoaded = false;
   }
 
+  markLoaded() {
+    this.props.markAsLoaded();
+    this.markedAsLoaded = true;
+  }
+
   componentWillReceiveProps(nextProps) {
+    if (!this.markedAsLoaded && nextProps.peers.data) this.markLoaded();
+
     if (nextProps.loading && nextProps.loading.length > 0 && this.props.loading.length === 0) {
       this.startTime = new Date();
       this.setState({ visible: true });
@@ -24,16 +31,10 @@ class LoadingBar extends React.Component {
   }
 
   componentDidMount() {
-    this.mountingTimeout = setTimeout(() => {
-      if (!this.markedAsLoaded && typeof this.props.markAsLoaded === 'function') {
-        this.markedAsLoaded = true;
-        this.props.markAsLoaded();
-      }
-    }, 100);
+    if (this.props.peers.data) this.markLoaded();
   }
 
   componentWillUnmount() {
-    clearTimeout(this.mountingTimeout);
     clearTimeout(this.timeout);
   }
 

diff --git a/src/components/loadingBar/loadingBar.test.js b/src/components/loadingBar/loadingBar.test.js
@@ -7,6 +7,11 @@ import LoadingBar from './loadingBar';
 
 describe('LoadingBar Container', () => {
   let clock;
+  const props = {
+    loading: [],
+    markAsLoaded: sinon.spy(),
+    peers: {},
+  };
 
   beforeEach(() => {
     clock = sinon.useFakeTimers({
@@ -20,18 +25,18 @@ describe('LoadingBar Container', () => {
   });
 
   it('should show ProgresBar if props.loading.length is changed not to be 0', () => {
-    const wrapper = mount(<LoadingBar loading={[]} />);
+    const wrapper = mount(<LoadingBar {...props} />);
     wrapper.setProps({ loading: ['test'] });
     expect(wrapper.find('ProgressBar')).to.be.present();
   });
 
   it('should not show ProgressBar if props.loading.length is 0', () => {
-    const wrapper = mount(<LoadingBar loading={[]} />);
+    const wrapper = mount(<LoadingBar {...props} />);
     expect(wrapper.find('ProgressBar')).not.to.be.present();
   });
 
   it('should hide ProgresBar after 1 second if props.loading.length is changed to be 0', () => {
-    const wrapper = mount(<LoadingBar loading={[]} />);
+    const wrapper = mount(<LoadingBar {...props} />);
     expect(wrapper.find('ProgressBar')).not.to.be.present();
     wrapper.setProps({ loading: ['test'] });
     expect(wrapper.find('ProgressBar')).to.be.present();
@@ -47,10 +52,10 @@ describe('LoadingBar Container', () => {
     expect(wrapper.find('ProgressBar')).not.to.be.present();
   });
 
-  it('should call markAsLoaded after LoadingBar mounted', () => {
-    const markAsLoaded = sinon.spy();
-    mount(<LoadingBar loading={[]} markAsLoaded={markAsLoaded} />);
-    clock.tick(101);
-    expect(markAsLoaded).to.have.been.calledWith();
+  it('should call markAsLoaded after peer is set', () => {
+    const wrapper = mount(<LoadingBar {...props} />);
+    expect(props.markAsLoaded).to.not.have.been.calledWith();
+    wrapper.setProps({ peers: { data: {} } });
+    expect(props.markAsLoaded).to.have.been.calledWith();
   });
 });
diff --git a/src/components/transactions/transactionList.js b/src/components/transactions/transactionList.js
@@ -13,16 +13,10 @@ import { parseSearchParams } from './../../utils/searchParams';
 class TransactionsList extends React.Component {
   constructor(props) {
     super(props);
-    if (props.peers.data) {
-      this.props.transactionsRequestInit({ address: this.props.address });
-    }
+    this.props.transactionsRequestInit({ address: this.props.address });
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.peers.data !== this.props.peers.data) {
-      this.props.transactionsRequestInit({ address: this.props.address });
-    }
-
     if (nextProps.transactions && this.props.nextStep) this.showDetails(nextProps.transactions);
   }
 
@@ -106,8 +100,4 @@ const mapDispatchToProps = dispatch => ({
   transactionsRequestInit: data => dispatch(transactionsRequestInit(data)),
 });
 
-const mapStateToProps = state => ({
-  peers: state.peers,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(TransactionsList);
+export default connect(null, mapDispatchToProps)(TransactionsList);