Move responsibility for displaying spinner into ErrorReport

The question of whether to show a spinner can reasonably be considered a
responsibility of the ErrorReport, so push it down to that component and
allow the ErrorReportContainer to figure out whether it should show up.

Allows us to make the Output dumber.

Author: Mat Brown

src/components/ErrorReport.jsx

@@ -4,7 +4,16 @@ import classnames from 'classnames';
 import find from 'lodash/find';
 import ErrorList from './ErrorList';
 
-function ErrorReport({errors, onErrorClick}) {
+function ErrorReport({errors, isValidating, onErrorClick}) {
+  if (isValidating) {
+    return <div className="output__delayed-error-overlay" />;
+  }
+
+  const hasErrors = Boolean(find(errors, list => list.items.length));
+  if (!hasErrors) {
+    return null;
+  }
+
   const isDocked = Boolean(find(errors, {state: 'runtime-error'}));
   const {html, css, javascript} = errors;
 
@@ -41,6 +50,7 @@ ErrorReport.propTypes = {
     html: PropTypes.object.isRequired,
     javascript: PropTypes.object.isRequired,
   }).isRequired,
+  isValidating: PropTypes.bool.isRequired,
   onErrorClick: PropTypes.func.isRequired,
 };
 

src/components/Output.jsx

@@ -4,21 +4,7 @@ import {t} from 'i18next';
 import classnames from 'classnames';
 import {ErrorReport, Preview} from '../containers';
 
-const errorStates = new Set(['validation-error', 'runtime-error']);
-
 class Output extends React.Component {
-  _renderErrors() {
-    if (this.props.validationState === 'validating') {
-      return <div className="output__delayed-error-overlay" />;
-    }
-
-    if (errorStates.has(this.props.validationState)) {
-      return <ErrorReport />;
-    }
-
-    return null;
-  }
-
   render() {
     const {
       isDraggingColumnDivider,
@@ -46,7 +32,7 @@ class Output extends React.Component {
             {t('workspace.components.output')}
           </div>
           <Preview />
-          {this._renderErrors()}
+          <ErrorReport />
         </div>
       </div>
     );
@@ -57,7 +43,6 @@ Output.propTypes = {
   isDraggingColumnDivider: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,
   style: PropTypes.object.isRequired,
-  validationState: PropTypes.string.isRequired,
   onHide: PropTypes.func.isRequired,
   onRef: PropTypes.func.isRequired,
 };

src/components/Workspace.jsx

@@ -228,7 +228,6 @@ class Workspace extends React.Component {
         isDraggingColumnDivider={isDraggingColumnDivider}
         isHidden={includes(hiddenUIComponents, 'output')}
         style={{flex: rowsFlex[1]}}
-        validationState={this._getOverallValidationState()}
         onHide={
           partial(this._handleComponentHide,
             'output')

src/containers/ErrorReport.js

@@ -3,7 +3,16 @@ import {ErrorReport} from '../components';
 import {focusLine} from '../actions';
 
 function mapStateToProps(state) {
-  return {errors: state.get('errors').toJS()};
+  return {
+    errors: state.get('errors').toJS(),
+    isValidating: Boolean(
+      state.getIn(['ui', 'editors', 'typing']) &&
+      state.get('errors').find(
+        error => error.get('state') === 'validation-error',
+      ) ||
+      state.get('errors').find(error => error.get('state') === 'validating'),
+    ),
+  };
 }
 
 function mapDispatchToProps(dispatch) {