Merge pull request #20 from andrerfneves/feature/loading-screen

Feature/loading screen

app/app.js

@@ -17,9 +17,8 @@ export default () => (
       <GlobalStyle />
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <Fragment>
-            <Router />
-          </Fragment>
+          {/* $FlowFixMe */}
+          <Router />
         </ConnectedRouter>
       </Provider>
     </Fragment>

app/components/loading-screen.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+
+const Wrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.background};
+`;
+
+export const LoadingScreen = () => (
+  <Wrapper>
+    <TextComponent value='Loading daemon...' />
+  </Wrapper>
+);

app/components/with-daemon-status-check.js

@@ -1,6 +1,8 @@
 // @flow
 import React, { type ComponentType, Component } from 'react';
 
+import { LoadingScreen } from './loading-screen';
+
 import rpc from '../../services/api';
 
 type State = {
@@ -51,6 +53,6 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
         return <WrappedComponent {...this.props} {...this.state} />;
       }
 
-      return 'Daemon is starting...';
+      return <LoadingScreen />;
     }
   };

app/router/container.js

@@ -2,5 +2,9 @@
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { RouterComponent } from './router';
+import { withDaemonStatusCheck } from '../components/with-daemon-status-check';
 
-export const Router = compose(withRouter)(RouterComponent);
+export const Router = compose(
+  withRouter,
+  withDaemonStatusCheck,
+)(RouterComponent);

app/views/dashboard.js

@@ -4,7 +4,6 @@ import React, { PureComponent, Fragment } from 'react';
 
 import { WalletSummaryComponent } from '../components/wallet-summary';
 import { TransactionDailyComponent } from '../components/transaction-daily';
-import { withDaemonStatusCheck } from '../components/with-daemon-status-check';
 
 import type { Transaction } from '../components/transaction-item';
 
@@ -20,7 +19,7 @@ type Props = {
   transactions: { [day: string]: Transaction[] },
 };
 
-export class Dashboard extends PureComponent<Props> {
+export class DashboardView extends PureComponent<Props> {
   componentDidMount() {
     /* eslint-disable-next-line */
     this.props.getSummary();
@@ -70,5 +69,3 @@ export class Dashboard extends PureComponent<Props> {
     );
   }
 }
-
-export const DashboardView = withDaemonStatusCheck(Dashboard);