adds inline loading to submission display

opentech/static_src/src/app/src/components/SubmissionDisplay/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Answer, { answerPropTypes } from './answers'
 import LoadingPanel from '@components/LoadingPanel';
+import InlineLoading from '@components/InlineLoading';
 
 import './styles.scss'
 
@@ -45,48 +46,49 @@ export default class SubmissionDisplay extends Component {
     }
 
     render() {
-        if (this.props.isLoading) {
+        const { metaQuestions = [], questions = [], stage } = this.props.submission || {};
+
+        if (this.props.isError) {
             return (
                 <div className="display-panel__loading">
-                    <LoadingPanel />
+                    <p>Something went wrong. Please try again later.</p>
                 </div>
             )
-        } else if (this.props.isError) {
+        } else if (this.props.submission === undefined && !this.props.isLoading) {
             return (
                 <div className="display-panel__loading">
-                    <p>Something went wrong. Please try again later.</p>
+                    <p>Please select a submission.</p>
                 </div>
             )
-        } else if (this.props.submission === undefined) {
+        }
+
+        if (questions.length == 0) {
             return (
                 <div className="display-panel__loading">
-                    <p>Please select a submission.</p>
+                    <LoadingPanel />
                 </div>
             )
         }
-        const { metaQuestions = [], questions = [], stage} = this.props.submission;
 
         return (
             <div className="application-display">
-                {stage &&
+                    {this.props.isLoading &&
+                        <InlineLoading />
+                    }
+
                     <h3>{stage} Information</h3>
-                }
 
-                {metaQuestions.length > 0 &&
                     <div className="grid grid--proposal-info">
                         {metaQuestions.map((response, index) => (
                             <MetaResponse key={index} {...response} />
                         ))}
                     </div>
-                }
 
-                {questions.length > 0 &&
                     <div className="rich-text rich-text--answers">
                         {questions.map((response, index) => (
                             <Response key={index} {...response} />
                         ))}
                     </div>
-                }
             </div>
         )
     }