fix: Fresh sync shows blank screen

packages/fether-react/src/App/App.js

@@ -18,6 +18,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import Accounts from '../Accounts';
 import BackupAccount from '../BackupAccount';
 import Onboarding from '../Onboarding';
+import RequireHealthOverlay from '../RequireHealthOverlay';
 import Send from '../Send';
 import Tokens from '../Tokens';
 import Whitelist from '../Whitelist';
@@ -48,20 +49,29 @@ class App extends Component {
       parityStore: { api }
     } = this.props;
 
+    if (isFirstRun) {
+      return (
+        <div className='window'>
+          <Onboarding />
+        </div>
+      );
+    }
+
     // The child components make use of light.js and light.js needs to be passed
     // an API first, otherwise it will throw an error.
     // We set parityStore.api right after we set the API for light.js, so we
     // verify here that parityStore.api is defined, and if not we don't render
-    // the children.
+    // the children, just a <RequireHealthOverlay />.
     if (!api) {
-      return null;
-    }
-
-    if (isFirstRun) {
       return (
-        <div className='window'>
-          <Onboarding />
-        </div>
+        <ReactResizeDetector handleHeight onResize={this.handleResize}>
+          <RequireHealthOverlay fullscreen require='node'>
+            {/* Adding these components to have minimum height on window */}
+            <div className='content'>
+              <div className='window' />
+            </div>
+          </RequireHealthOverlay>
+        </ReactResizeDetector>
       );
     }
 

packages/fether-react/src/Health/Health.js

@@ -4,15 +4,23 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-
+import { branch } from 'recompose';
 import { chainName$, withoutLoading } from '@parity/light.js';
 import light from '@parity/light.js-react';
 import withHealth from '../utils/withHealth';
 
-@light({
-  chainName: () => chainName$().pipe(withoutLoading())
-})
 @withHealth
+@branch(
+  ({
+    health: {
+      status: { good, syncing }
+    }
+  }) => good || syncing,
+  // Only call light.js chainName$ if we're syncing or good
+  light({
+    chainName: () => chainName$().pipe(withoutLoading())
+  })
+)
 class Health extends Component {
   render () {
     return (
@@ -49,18 +57,18 @@ class Health extends Component {
       chainName
     } = this.props;
 
-    if (!status.nodeConnected && !status.internet) {
+    if (status.downloading) {
+      return `Downloading Parity Ethereum (${
+        payload.downloading.syncPercentage
+      }%)`;
+    } else if (status.launching) {
+      return 'Launching the node...';
+    } else if (!status.nodeConnected && !status.internet) {
       return 'No internet. No node connected';
     } else if (!status.nodeConnected && status.internet) {
       return 'Connecting to node...';
     } else if (status.nodeConnected && !status.internet) {
       return 'No internet. Connected to node';
-    } else if (status.downloading) {
-      return `Downloading Parity Ethereum... (${
-        payload.downloading.syncPercentage
-      }%)`;
-    } else if (status.launching) {
-      return 'Launching the node...';
     } else if (!status.clockSync) {
       return 'Clock of host not in sync';
     } else if (!status.peers) {

packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js

@@ -5,17 +5,26 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { branch } from 'recompose';
 import { chainName$, withoutLoading } from '@parity/light.js';
 import light from '@parity/light.js-react';
 import { Modal } from 'fether-ui';
 
 import withHealth from '../../utils/withHealth';
 import loading from '../../assets/img/icons/loading.svg';
 
-@light({
-  chainName: () => chainName$().pipe(withoutLoading())
-})
 @withHealth
+@branch(
+  ({
+    health: {
+      status: { syncing }
+    }
+  }) => syncing,
+  // Only call light.js chainName$ if we're syncing
+  light({
+    chainName: () => chainName$().pipe(withoutLoading())
+  })
+)
 class HealthModal extends Component {
   static propTypes = {
     chainName: PropTypes.string,
@@ -46,16 +55,16 @@ class HealthModal extends Component {
       health: { status }
     } = this.props;
 
-    if (!status.nodeConnected && !status.internet) {
+    if (status.downloading) {
+      return 'Downloading Parity Ethereum...';
+    } else if (status.launching) {
+      return 'Launching the node...';
+    } else if (!status.nodeConnected && !status.internet) {
       return 'No internet. No node connected';
     } else if (!status.nodeConnected && status.internet) {
       return 'Connecting to node...';
     } else if (status.nodeConnected && !status.internet) {
       return 'No internet. Connected to node';
-    } else if (status.downloading) {
-      return 'Downloading Parity Ethereum...';
-    } else if (status.launching) {
-      return 'Launching the node...';
     } else if (!status.clockSync) {
       return 'Clock of host not in sync';
     } else if (!status.peers) {

packages/fether-react/src/utils/withHealth.js

@@ -127,21 +127,20 @@ export default compose(
         ]) => {
           const isDownloading =
             online && downloadProgress > 0 && !isParityRunning;
-          const isNodeConnected =
-            !isDownloading && isApiConnected && isParityRunning;
-          const isNoPeers = peerCount === undefined || peerCount.lte(1);
+          const isNoPeers =
+            isApiConnected && (peerCount === undefined || peerCount.lte(1));
           const isGood =
-            isSync && !isNoPeers && isClockSync && isNodeConnected && online;
+            isSync && !isNoPeers && isClockSync && isApiConnected && online;
 
           // Status - list of all states of health store
           const status = {
             internet: online, // Internet connection
-            nodeConnected: isNodeConnected, // Connected to local Parity Ethereum node
+            nodeConnected: isApiConnected, // Connected to local Parity Ethereum node
             clockSync: isClockSync, // Local clock is not synchronised
             downloading: isDownloading, // Currently downloading Parity Ethereum
             launching: !isApiConnected, // Launching Parity Ethereum only upon startup
             peers: !isNoPeers, // Connecion to peer nodes
-            syncing: !isSync, // Synchronising blocks
+            syncing: isApiConnected && !isSync, // Synchronising blocks
             good: isGood // Synchronised and no issues
           };