animate status bar, add Loading text

client/app/scripts/components/app.js

@@ -30,6 +30,7 @@ function getStateFromStores() {
     nodeDetails: AppStore.getNodeDetails(),
     nodes: AppStore.getNodes(),
     topologies: AppStore.getTopologies(),
+    topologiesLoaded: AppStore.isTopologiesLoaded(),
     version: AppStore.getVersion(),
     websocketClosed: AppStore.isWebsocketClosed()
   };
@@ -94,6 +95,7 @@ const App = React.createClass({
           <TopologyOptions options={this.state.currentTopologyOptions}
             activeOptions={this.state.activeTopologyOptions} />
           <Status errorUrl={this.state.errorUrl} topology={this.state.currentTopology}
+            topologiesLoaded={this.state.topologiesLoaded}
             websocketClosed={this.state.websocketClosed} />
         </Sidebar>
 

client/app/scripts/components/status.js

@@ -2,29 +2,34 @@ const React = require('react');
 
 const Status = React.createClass({
 
-  renderConnectionState: function(errorUrl, websocketClosed) {
-    if (errorUrl || websocketClosed) {
-      const title = errorUrl ? 'Cannot reach Scope. Make sure the following URL is reachable: ' + errorUrl : '';
-      return (
-        <div className="status-connection" title={title}>
-          <span className="status-icon fa fa-exclamation-circle" />
-          <span className="status-label">Trying to reconnect...</span>
-        </div>
-      );
-    }
-  },
-
-  renderTopologyStats: function(stats) {
-    const statsText = `${stats.node_count} nodes, ${stats.edge_count} connections`;
-    return <div className="status-stats">{statsText}</div>;
-  },
-
   render: function() {
-    const showStats = this.props.topology && !this.props.errorUrl && !this.props.websocketClosed;
+    let title = '';
+    let text = 'Trying to reconnect...';
+    let showWarningIcon = false;
+    let classNames = 'status sidebar-item';
+
+    if (this.props.errorUrl) {
+      title = `Cannot reach Scope. Make sure the following URL is reachable: ${this.props.errorUrl}`;
+      classNames += ' status-loading';
+      showWarningIcon = true;
+    } else if (!this.props.topologiesLoaded) {
+      text = 'Loading topologies...';
+      classNames += ' status-loading';
+      showWarningIcon = false;
+    } else if (this.props.websocketClosed) {
+      classNames += ' status-loading';
+      showWarningIcon = true;
+    } else if (this.props.topology) {
+      const stats = this.props.topology.stats;
+      text = `${stats.node_count} nodes, ${stats.edge_count} connections`;
+      classNames += ' status-stats';
+      showWarningIcon = false;
+    }
+
     return (
-      <div className="status sidebar-item">
-        {showStats && this.renderTopologyStats(this.props.topology.stats)}
-        {!showStats && this.renderConnectionState(this.props.errorUrl, this.props.websocketClosed)}
+      <div className={classNames}>
+        {showWarningIcon && <span className="status-icon fa fa-exclamation-circle" />}
+        <span className="status-label" title={title}>{text}</span>
       </div>
     );
   }

client/app/scripts/stores/app-store.js

@@ -56,6 +56,7 @@ let nodes = makeOrderedMap();
 let nodeDetails = null;
 let selectedNodeId = null;
 let topologies = [];
+let topologiesLoaded = false;
 let websocketClosed = true;
 
 function setTopology(topologyId) {
@@ -192,6 +193,10 @@ const AppStore = assign({}, EventEmitter.prototype, {
     return version;
   },
 
+  isTopologiesLoaded: function() {
+    return topologiesLoaded;
+  },
+
   isWebsocketClosed: function() {
     return websocketClosed;
   }
@@ -316,6 +321,7 @@ AppStore.registeredCallback = function(payload) {
 
     case ActionTypes.RECEIVE_TOPOLOGIES:
       errorUrl = null;
+      topologiesLoaded = true;
       topologies = payload.topologies;
       if (!currentTopology) {
         setTopology(currentTopologyId);

client/app/styles/main.less

@@ -167,7 +167,6 @@ h2 {
     font-size: 16px;
     position: relative;
     top: 1px;
-    color: @text-secondary-color;
   }
 
   &-label {
@@ -389,7 +388,7 @@ h2 {
 .sidebar {
   position: fixed;
   bottom: 16px;
-  left: 24px;
+  left: 20px;
   width: 18em;
   font-size: 85%;
 
@@ -404,6 +403,9 @@ h2 {
       background-color: darken(@background-color, 4%);
       color: @text-secondary-color;
     }
+    &.status-loading {
+      animation: status-loading 2.0s infinite ease-in-out;
+    }
 
     &-action {
       float: right;
@@ -415,3 +417,13 @@ h2 {
     }
   }
 }
+
+@keyframes status-loading {
+  0%, 100% {
+    background-color: darken(@background-color, 4%);
+    color: @text-secondary-color;
+  } 50% {
+    background-color: darken(@background-color, 8%);
+    color: @text-color;
+  }
+}