From 1c7c33dc7e99536e3c7cdd1413d758163f1e939b Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 12 Feb 2019 13:50:09 +0000
Subject: [PATCH] adds loading panel to the detail view

---
 .../app/src/components/DetailView/index.js    | 19 ++++++++++----
 .../src/containers/GroupByRoundDetailView.js  | 25 ++++++++++++++++--
 .../src/containers/GroupByStatusDetailView.js | 26 +++++++++++++++++--
 3 files changed, 61 insertions(+), 9 deletions(-)

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 933c972c3..ff14a9319 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 657a6f871..685427d29 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 d0ce02e53..8bc46474f 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);
-- 
GitLab