diff --git a/client/app/scripts/components/details-card.js b/client/app/scripts/components/details-card.js
index 703719ce9..1ae3d6c7c 100644
--- a/client/app/scripts/components/details-card.js
+++ b/client/app/scripts/components/details-card.js
@@ -57,7 +57,12 @@ class DetailsCard extends React.Component {
return (
{showingTerminal && }
-
+
);
}
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index ffd99e6a1..6b49acd5c 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -1,5 +1,6 @@
import debug from 'debug';
import React from 'react';
+import classNames from 'classnames';
import { connect } from 'react-redux';
import { Map as makeMap } from 'immutable';
@@ -73,6 +74,10 @@ class NodeDetails extends React.Component {
renderLoading() {
const node = this.props.nodes.get(this.props.nodeId);
const label = node ? node.get('label') : this.props.label;
+ // NOTE: If we start the fa-spin animation before the node details panel has been
+ // mounted, the spinner is displayed blurred the whole time in Chrome (possibly
+ // caused by a bug having to do with animating the details panel).
+ const spinnerClassName = classNames('fa fa-circle-o-notch', { 'fa-spin': this.props.mounted });
const nodeColor = (node ?
getNodeColorDark(node.get('rank'), label, node.get('pseudo')) :
getNeutralColor());
@@ -98,7 +103,7 @@ class NodeDetails extends React.Component {