added loading blocks to indicate komodod init

react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js

@@ -7,29 +7,40 @@ import {
 
 class WalletsNativeSyncProgress extends React.Component {
   renderSyncPercentagePlaceholder() {
-    if (this.props.Dashboard.progress.blocks > 0 &&
+    if (this.props.Dashboard.progress &&
+        this.props.Dashboard.progress.blocks > 0 &&
         this.props.Dashboard.progress.longestchain === 0) {
       return (
         <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
           <span className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
         </div>
       );
-    } else if (this.props.Dashboard.progress.blocks === 0) {
+    } else if (this.props.Dashboard.progress && this.props.Dashboard.progress.blocks === 0) {
       return (
         <div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent">
           <span className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
         </div>
       );
     } else {
-      const syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
+      if (this.props.Dashboard.progress && this.props.Dashboard.progress.block) {
+        const syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
 
-      return (
+        return (
-        <div
+          <div
-          className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
+            className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
-          style={{ width: syncPercentage }}>
+            style={{ width: syncPercentage }}>
-          <span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections }
+            <span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections }
-        </div>
+          </div>
-      );
+        );
+      } else {
+        return (
+          <div
+            className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
+            style={{ width: '100%' }}>
+            <span style={{ width: '100%' }}>Loading blocks...</span>
+          </div>
+        );
+      }
     }
   }
 
@@ -57,9 +68,12 @@ class WalletsNativeSyncProgress extends React.Component {
             `: ${currentProgress}%`
           );
         } else {
-          return(
+          if (this.props.Dashboard.progress.remoteKMDNode &&
-            `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
+              this.props.Dashboard.progress.remoteKMDNode.blocks) {
-          );
+            return(
+              `: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})`
+            );
+          }
         }
       } else if (this.props.Settings.debugLog.indexOf('Still rescanning') > -1) {
         const temp = this.props.Settings.debugLog.split(' ');
@@ -93,18 +107,19 @@ class WalletsNativeSyncProgress extends React.Component {
   }
 
   renderChainActivationNotification() {
-    if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
+    if (this.props.Dashboard.progress) {
-        (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
+      if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
-      return ChainActivationNotificationRender.call(this);
+          (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
+        return ChainActivationNotificationRender.call(this);
+      }
+    } else {
+      return null;
     }
-
-    return null;
   }
 
   render() {
     if (this.props &&
-        this.props.Dashboard &&
+        this.props.Dashboard) {
-        this.props.Dashboard.progress) {
       return WalletsNativeSyncProgressRender.call(this);
     }