From 8c6d02692d96090210b9a7ddef746f4b73f2aa02 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 12 Feb 2019 13:51:13 +0000
Subject: [PATCH] adds inline loading to submission display
---
.../src/components/SubmissionDisplay/index.js | 28 ++++++++++---------
1 file changed, 15 insertions(+), 13 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/SubmissionDisplay/index.js b/opentech/static_src/src/app/src/components/SubmissionDisplay/index.js
index 53853ef43..d87226f7e 100644
--- a/opentech/static_src/src/app/src/components/SubmissionDisplay/index.js
+++ b/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>
)
}
--
GitLab