feat(tx): app load screen

package.json

@@ -18,7 +18,7 @@
     "popper.js": "^1.12.9",
     "prop-types": "^15.7.2",
     "qrcode.react": "^0.8.0",
-    "react": "^16.5.0",
+    "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.2.0",
     "react-loading": "^1.0.3",

src/App.js

@@ -6,10 +6,12 @@
  */
 
 import React from 'react';
+
 import { Switch, BrowserRouter as Router, Route } from 'react-router-dom';
 import PeerAdmin from './screens/PeerAdmin';
 import DashboardTx from './screens/DashboardTx';
 import Navigation from './components/Navigation';
+import Loading from './components/Loading';
 import TransactionDetail from './screens/TransactionDetail';
 import AddressDetail from './screens/AddressDetail';
 import DecodeTx from './screens/DecodeTx';
@@ -22,7 +24,7 @@ import Dag from './screens/Dag';
 import Dashboard from './screens/Dashboard';
 import VersionError from './screens/VersionError';
 import WebSocketHandler from './WebSocketHandler';
-import { dashboardUpdate, isVersionAllowedUpdate } from "./actions/index";
+import { apiLoadErrorUpdate, dashboardUpdate, isVersionAllowedUpdate } from "./actions/index";
 import { connect } from "react-redux";
 import versionApi from './api/version';
 import helpers from './utils/helpers';
@@ -39,12 +41,13 @@ const mapDispatchToProps = dispatch => {
   return {
     dashboardUpdate: data => dispatch(dashboardUpdate(data)),
     isVersionAllowedUpdate: data => dispatch(isVersionAllowedUpdate(data)),
+    apiLoadErrorUpdate: data => dispatch(apiLoadErrorUpdate(data)),
   };
 };
 
 
 const mapStateToProps = (state) => {
-  return { isVersionAllowed: state.isVersionAllowed };
+  return { isVersionAllowed: state.isVersionAllowed, apiLoadError: state.apiLoadError };
 };
 
 
@@ -53,13 +56,15 @@ class Root extends React.Component {
     WebSocketHandler.on('dashboard', this.handleWebsocket);
 
     hathorLib.axios.registerNewCreateRequestInstance(createRequestInstance);
+    this.props.apiLoadErrorUpdate({apiLoadError: false});
 
     versionApi.getVersion().then((data) => {
       hathorLib.network.setNetwork(data.network.split('-')[0]);
       this.props.isVersionAllowedUpdate({allowed: helpers.isVersionAllowed(data.version)});
     }, (e) => {
       // Error in request
       console.log(e);
+      this.props.apiLoadErrorUpdate({apiLoadError: true});
     });
   }
 
@@ -80,7 +85,18 @@ class Root extends React.Component {
   render() {
     if (this.props.isVersionAllowed === undefined) {
       // Waiting for version
-      return null;
+      return (
+        <Router>
+          <>
+            <Navigation />
+            { this.props.apiLoadError ? 
+              <div className="content-wrapper">
+                <h3 className="text-danger">Error loading the explorer. Please reload the page to try again.</h3>
+              </div>
+              : <Loading />  }
+          </>
+        </Router>);
+
     } else if (!this.props.isVersionAllowed) {
       return <VersionError />;
     } else {

src/actions/index.js

@@ -7,4 +7,6 @@
 
 export const dashboardUpdate = data => ({ type: "dashboard_update", payload: data });
 
-export const isVersionAllowedUpdate = data => ({ type: "is_version_allowed_update", payload: data });
+export const isVersionAllowedUpdate = data => ({ type: "is_version_allowed_update", payload: data });
+
+export const apiLoadErrorUpdate = data => ({ type: 'api_load_error_update', payload: data });

src/components/Loading.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import ReactLoading from 'react-loading';
+import colors from '../index.scss';
+
+const Loading = (props) => {
+
+  const slowDelay = props.slowDelay || 3000;
+
+  const [slowLoad, setSlowLoad] = useState(false);
+
+  useEffect(() => {
+    const updateSlowLoad = setTimeout(() => setSlowLoad(true), slowDelay);
+
+    return () => { clearTimeout(updateSlowLoad) }
+  })
+
+  return (
+    <div className="loading-wrapper">
+      <ReactLoading {...props} />
+      { slowLoad ? <span>Still loading... Please, be patient.</span> : null }
+    </div>
+  ) 
+} 
+
+Loading.defaultProps =  {
+  type: 'spin',
+  color: colors.purpleHathor,
+  delay: 500
+}
+
+export default Loading;

src/index.scss

@@ -429,3 +429,16 @@ p.subtitle {
   color: #856404;
   text-decoration: underline;
 }
+
+.loading-wrapper {
+  width: 100%;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  & span {
+    padding: 5px;
+  }
+}

src/reducers/index.js

@@ -33,6 +33,8 @@ const rootReducer = (state = initialState, action) => {
       return Object.assign({}, state, {data: action.payload});
     case 'is_version_allowed_update':
       return Object.assign({}, state, {isVersionAllowed: action.payload.allowed});
+    case 'api_load_error_update':
+      return Object.assign({}, state, {apiLoadError: action.payload.apiLoadError});
     default:
       return state;
   }