diff --git a/opentech/static_src/src/app/src/components/DetailView/index.js b/opentech/static_src/src/app/src/components/DetailView/index.js index 933c972c3496be0e01adcbedc313df5c989468ce..ff14a9319c1cca99bd7e6abd6d29488ff9021f98 100644 --- a/opentech/static_src/src/app/src/components/DetailView/index.js +++ b/opentech/static_src/src/app/src/components/DetailView/index.js @@ -8,6 +8,7 @@ import DisplayPanel from '@containers/DisplayPanel'; import SlideInRight from '@components/Transitions/SlideInRight' import SlideOutLeft from '@components/Transitions/SlideOutLeft' import { getCurrentSubmissionID } from '@selectors/submissions'; +import LoadingPanel from '@components/LoadingPanel'; import './style.scss'; @@ -17,6 +18,7 @@ class DetailView extends Component { submissionID: PropTypes.number, windowSize: PropTypes.objectOf(PropTypes.number), clearSubmission: PropTypes.func.isRequired, + isLoading: PropTypes.bool, }; isMobile = (width) => (width ? width : this.props.windowSize.windowWidth) < 1024 @@ -26,8 +28,7 @@ class DetailView extends Component { } render() { - const { listing, submissionID } = this.props; - + const { listing, submissionID, isLoading } = this.props; const activeSubmision = !!submissionID; if (this.isMobile()) { @@ -52,14 +53,22 @@ class DetailView extends Component { </div> ) } else { + if (isLoading) { + return ( + <LoadingPanel /> + ) + } return ( <div className="detail-view"> - {listing} - { this.renderDisplay() } + {!isLoading && + <> + {listing} + { this.renderDisplay() } + </> + } </div> ) } - } } diff --git a/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js b/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js index 657a6f871220600cce0727cdf9f1733d6fb71368..685427d29b5e3a8d58cbfcbc5c67d3ab80986362 100644 --- a/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js +++ b/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js @@ -1,18 +1,39 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux' import DetailView from '@components/DetailView'; import ByRoundListing from '@containers/ByRoundListing'; +import { + getRoundsFetching, +} from '@selectors/rounds'; +import { + getByGivenStatusesLoading, +} from '@selectors/submissions'; -export default class GroupByRoundDetailView extends React.Component { +class GroupByRoundDetailView extends React.Component { static propTypes = { submissionStatuses: PropTypes.arrayOf(PropTypes.string), + isLoading: PropTypes.bool, }; render() { const listing = <ByRoundListing submissionStatuses={this.props.submissionStatuses} />; + const { isLoading } = this.props; + return ( - <DetailView listing={listing} /> + <DetailView listing={listing} isLoading={isLoading} /> ); } } + +const mapStateToProps = (state, ownProps) => ({ + isLoading: ( + getByGivenStatusesLoading(ownProps.submissionStatuses)(state) || + getRoundsFetching(state) + ), +}) + +export default connect( + mapStateToProps, +)(GroupByRoundDetailView); diff --git a/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js index d0ce02e5378e383edd7bfe8b75010f97870ae939..8bc46474fe826d2a15b5d1837805831d76e212e9 100644 --- a/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js +++ b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js @@ -1,13 +1,35 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux' import DetailView from '@components/DetailView'; import ByStatusListing from '@containers/ByStatusListing'; -export default class GroupByStatusDetailView extends React.Component { +import { + getCurrentRound, +} from '@selectors/submissions'; + + +class GroupByStatusDetailView extends React.Component { + static propTypes = { + submissions: PropTypes.arrayOf(PropTypes.object), + round: PropTypes.object, + }; + render() { const listing = <ByStatusListing />; + const { round } = this.props; + const isLoading = !round || (round && (round.isFetching || round.submissions.isFetching)) return ( - <DetailView listing={listing} /> + <DetailView listing={listing} isLoading={isLoading} /> ); } } + +const mapStateToProps = state => ({ + round: getCurrentRound(state), +}) + +export default connect( + mapStateToProps, +)(GroupByStatusDetailView);