WithHealth: Wait 2s before showing not synced (fix #262)

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

@@ -32,48 +32,29 @@ class RequireHealthOverlay extends Component {
   };
 
   state = {
-    visible: false // false | true | id of the timeout that will make the overlay visible
-    // We want to display the overlay after 2s of problematic health. Syncing
-    // to new blocks from the top of the chain takes 1s and we don't want to
-    // display the overlay in that case.
+    visible: false
   };
 
   componentDidMount () {
-    // Initial render check. Display overlay immediately if problematic health.
-    if (!statusMatches(this.props.health.status, this.props.require)) {
-      this.setState({ visible: true });
-    }
+    this.updateVisibility();
   }
 
   componentDidUpdate () {
-    if (statusMatches(this.props.health.status, this.props.require)) {
-      // If there is an ongoing timeout to make the overlay visible, clear it
-      if (typeof this.state.visible === 'number') {
-        clearTimeout(this.state.visible);
-      }
+    this.updateVisibility();
+  }
 
+  updateVisibility = () => {
+    if (statusMatches(this.props.health.status, this.props.require)) {
       if (this.state.visible !== false) {
         this.setState({ visible: false });
       }
     } else {
-      // Bad node health
-      // Display the overlay after 2s (if there is no ongoing timeout)
       if (this.state.visible === false) {
-        this.setState({
-          visible: setTimeout(() => {
-            this.setState({ visible: true });
-          }, 2000)
-        });
+        this.setState({ visible: true });
       }
     }
   }
 
-  componentWillUnmount () {
-    if (typeof this.state.visible === 'number') {
-      clearTimeout(this.state.visible);
-    }
-  }
-
   render () {
     const { visible } = this.state;
     const { fullscreen } = this.props;

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

@@ -4,9 +4,10 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import BigNumber from 'bignumber.js';
-import { combineLatest, Observable, fromEvent, merge } from 'rxjs';
+import { combineLatest, Observable, of, fromEvent, merge } from 'rxjs';
 import { compose, mapPropsStream } from 'recompose';
 import {
+  delay,
   distinctUntilChanged,
   filter,
   map,
@@ -107,7 +108,12 @@ const rpcs$ = isApiConnected$.pipe(
               startingBlock
             }
           };
-        })
+        }),
+        // Emit "not synced" only if we haven't been synced for over 2 seconds,
+        // as syncing to new blocks from the top of the chain usually takes ~1s.
+        // syncStatus$() is distinctUntilChanged, so {isSync: false} will never
+        // be fired twice in a row.
+        switchMap(sync => sync.isSync ? of(sync) : of(sync).pipe(delay(2000)))
       ),
       peerCount$().pipe(withoutLoading())
     )