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 (
-
+
+
+
+
+ Loading...
+
+
+ {this.props.nodeId}
+
+
+
+
+
);
},
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 {