Convert lagging notice from alert to regular message

js/component/common.js

@@ -1,9 +1,12 @@
 //component/icon.js
 
 var Icon = React.createClass({
+  propTypes: {
+    style: React.PropTypes.object,
+  },
   render: function() {
     var className = 'icon ' + this.props.icon;
-    return <span className={className}></span>
+    return <span className={className} style={this.props.style}></span>
   }
 });
 

js/component/splash.js

@@ -12,8 +12,6 @@ var splashStyle = {
   marginTop: '24px',
   width: '325px',
   textAlign: 'center',
-}, splashDetailsStyle = {
-  color: '#c3c3c3',
 };
 
 var SplashScreen = React.createClass({
@@ -23,7 +21,8 @@ var SplashScreen = React.createClass({
   },
   getInitialState: function() {
     return {
-      details: 'Starting daemon'
+      details: 'Starting daemon',
+      isLagging: false,
     }
   },
   updateStatus: function(checkNum=0, was_lagging=false) {
@@ -33,15 +32,10 @@ var SplashScreen = React.createClass({
           return;
         }
 
-        if (status.is_lagging) {
-          if (!was_lagging) { // We just started lagging, so display message as alert
-            alert(status.message);
-          }
-        } else { // Not lagging, so display the message normally
-          this.setState({
-            details: status.message
-          });
-        }
+        this.setState({
+          details: status.message + (status.is_lagging ? '' : '...'),
+          isLagging: status.is_lagging,
+        });
 
         if (checkNum < 600) {
           setTimeout(() => {
@@ -63,7 +57,7 @@ var SplashScreen = React.createClass({
             {this.props.message}
             <span className="busy-indicator"></span>
           </h3>
-          <span style={splashDetailsStyle}>{this.state.details}...</span>
+          <Icon icon='icon-warning' style={this.state.isLagging ? {} : { display: 'none' }}/> <span style={ this.state.isLagging ? {} : {'color': '#c3c3c3'} }>{this.state.details}</span>
         </div>
       </div>
     );