Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node details spinner Chrome display bug fix #2177

Merged
merged 1 commit into from
Feb 6, 2017
+12 −2
Merged

Node details spinner Chrome display bug fix #2177

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion client/app/scripts/components/details-card.js
View file
Original file line number Diff line number Diff line change
@@ -57,7 +57,12 @@ class DetailsCard extends React.Component {
return (
<div className="details-wrapper" style={style}>
{showingTerminal && <EmbeddedTerminal />}
<NodeDetails nodeId={this.props.id} key={this.props.id} {...this.props} />
<NodeDetails
key={this.props.id}
nodeId={this.props.id}
mounted={this.state.mounted}
{...this.props}
/>
</div>
);
}
7 changes: 6 additions & 1 deletion client/app/scripts/components/node-details.js
View file
Original file line number Diff line number Diff line change
@@ -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 });

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

const nodeColor = (node ?
getNodeColorDark(node.get('rank'), label, node.get('pseudo')) :
getNeutralColor());
@@ -98,7 +103,7 @@ class NodeDetails extends React.Component {
</div>
<div className="node-details-content">
<div className="node-details-content-loading">
<span className="fa fa-circle-o-notch fa-spin" />
<span className={spinnerClassName} />
</div>
</div>
</div>