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 {
- +