From e60d64da2702c37664ccec6fc221a33efda6f6a9 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 20 Nov 2015 16:49:26 +0100
Subject: [PATCH] Show a spinner while node details are loading

---
 client/app/scripts/components/node-details.js | 18 +++++++++++++++++-
 client/app/styles/main.less                   | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 954b21c99..075e498fb 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -22,7 +22,23 @@ const NodeDetails = React.createClass({
 
   renderLoading: function() {
     return (
-      <div className="node-details" />
+      <div className="node-details">
+        <div className="node-details-header node-details-header-loading">
+          <div className="node-details-header-wrapper">
+            <h2 className="node-details-header-label">
+              Loading...
+            </h2>
+            <div className="node-details-header-label-minor truncate">
+              {this.props.nodeId}
+            </div>
+          </div>
+        </div>
+        <div className="node-details-content">
+          <div className="node-details-content-loading">
+            <span className="fa fa-circle-o-notch fa-spin" />
+          </div>
+        </div>
+      </div>
     );
   },
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 3ddb0b9f0..24c1c2c93 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -22,6 +22,7 @@
 @background-color: lighten(@primary-color, 66%);
 @background-secondary-color: lighten(@background-color, 8%);
 @background-dark-color: @primary-color;
+@background-medium-color: lighten(@background-dark-color, 55%);
 @text-color: lighten(@primary-color, 10%);
 @text-secondary-color: lighten(@primary-color, 33%);
 @text-tertiary-color: lighten(@primary-color, 50%);
@@ -35,6 +36,10 @@
   text-overflow: ellipsis;
 }
 
+.colorable {
+  transition: background-color .3s ease-in-out;
+}
+
 .palable {
   transition: opacity .2s ease-in-out;
   transition: border-color .2s ease-in-out;
@@ -352,6 +357,7 @@ h2 {
   flex-flow: column;
 
   &-header {
+    .colorable;
 
     &-wrapper {
       padding: 36px 36px 16px 36px;
@@ -384,6 +390,10 @@ h2 {
       background-color: @background-dark-color;
     }
 
+    &-loading {
+      background-color: @background-medium-color;
+    }
+
   }
 
   &-controls {
@@ -444,6 +454,14 @@ h2 {
     &-info {
       margin-top: 16px;
     }
+
+    &-loading {
+      margin-top: 48px;
+      text-align: center;
+      font-size: 48px;
+      color: @background-medium-color;
+      opacity: 0.7;
+    }
   }
 
   &-table {