Adds loading spinner for public/private analyses list.

neuroscout/frontend/src/AnalysisList.tsx

@@ -11,7 +11,7 @@ import { Link } from 'react-router-dom';
 export interface AnalysisListProps {
   loggedIn?: boolean;
   publicList?: boolean;
-  analyses: AppAnalysis[];
+  analyses: (AppAnalysis[] | null);
   cloneAnalysis: (id: string) => void;
   onDelete?: (analysis: AppAnalysis) => void;
   children?: React.ReactNode;
@@ -97,12 +97,13 @@ class AnalysisListTable extends React.Component<AnalysisListProps> {
           columns={analysisTableColumns}
           rowKey="id"
           size="small"
-          dataSource={analyses}
+          dataSource={(analyses === null ? [] : analyses)}
+          loading={analyses === null}
           expandedRowRender={record =>
             <p>
               {record.description}
             </p>}
-          pagination={(analyses.length > 20) ? {'position': 'bottom'} : false}
+          pagination={(analyses !== null && analyses.length > 20) ? {'position': 'bottom'} : false}
         />
       </div>
     );

neuroscout/frontend/src/App.tsx

@@ -69,8 +69,8 @@ class App extends Reflux.Component<any, {}, AppState> {
           this.setState({ analyses });
         });
       },
-      analyses: [],
-      publicAnalyses: [],
+      analyses: null,
+      publicAnalyses: null,
       auth: authActions.getInitialState(),
       datasets: [],
       onDelete: this.onDelete,
@@ -95,36 +95,38 @@ class App extends Reflux.Component<any, {}, AppState> {
       if (key < checkCount) { return; }
       if (!(this.state.auth.loggedIn)) { return; }
       let changeFlag = false;
-      let updatedAnalyses = this.state.analyses.map(async (analysis) => {
-        if (['DRAFT', 'PASSED'].indexOf(analysis.status) > -1) {
-          return analysis;
-        }
-        let id = analysis.id;
-        return jwtFetch(`${DOMAINROOT}/api/analyses/${id}`, { method: 'get' })
-          .then((data: ApiAnalysis) => {
-            if ((data.status !== analysis.status)
-                && (['SUBMITTING', 'PENDING'].indexOf(data.status) === -1)) {
-              changeFlag = true;
-              message.info(`analysis ${id} updated from ${analysis.status} to ${data.status}`);
-              analysis.status = data.status;
-            }
+      if (this.state.analyses !== null) {
+        let updatedAnalyses = this.state.analyses.map(async (analysis) => {
+          if (['DRAFT', 'PASSED'].indexOf(analysis.status) > -1) {
             return analysis;
-        })
-        .catch(() => { return analysis; });
-      });
-      Promise.all(updatedAnalyses).then((values) => {
-        if (changeFlag) {
-          this.setState({ analyses: values});
-        }
-      });
+          }
+          let id = analysis.id;
+          return jwtFetch(`${DOMAINROOT}/api/analyses/${id}`, { method: 'get' })
+            .then((data: ApiAnalysis) => {
+              if ((data.status !== analysis.status)
+                  && (['SUBMITTING', 'PENDING'].indexOf(data.status) === -1)) {
+                changeFlag = true;
+                message.info(`analysis ${id} updated from ${analysis.status} to ${data.status}`);
+                analysis.status = data.status;
+              }
+              return analysis;
+          })
+          .catch(() => { return analysis; });
+        });
+        Promise.all(updatedAnalyses).then((values) => {
+          if (changeFlag) {
+            this.setState({ analyses: values});
+          }
+        });
+      }
       await timeout(12000);
     }
   };
 
   // Actually delete existing analysis given its hash ID, called from onDelete()
   deleteAnalysis = (id): void => {
     api.deleteAnalysis(id).then((response) => {
-      if (response === true) {
+      if (response === true && this.state.analyses !== null) {
         this.setState({ analyses: this.state.analyses.filter(a => a.id !== id) });
       }
     });
@@ -151,7 +153,11 @@ class App extends Reflux.Component<any, {}, AppState> {
   cloneAnalysis = (id: string): void => {
     api.cloneAnalysis(id).then((analysis) => {
       if (analysis !== null) {
-        this.setState({ analyses: this.state.analyses.concat([analysis]) });
+        if (this.state.analyses === null) {
+          this.setState({ analyses: [analysis] });
+        } else {
+          this.setState({ analyses: this.state.analyses.concat([analysis]) });
+        }
       }
     });
   };

neuroscout/frontend/src/Routes.tsx

@@ -47,7 +47,10 @@ export default class Routes extends React.Component<AppState, {}> {
             <AnalysisBuilder
               id={props.match.params.id}
               updatedAnalysis={() => this.props.loadAnalyses()}
-              userOwns={this.props.analyses.filter((x) => x.id === props.match.params.id).length > 0}
+              userOwns={
+                (this.props.analyses === null ? false
+                  : this.props.analyses.filter((x) => x.id === props.match.params.id).length > 0)
+              }
               datasets={this.props.datasets}
               doTooltip={true}
             />}
@@ -59,7 +62,10 @@ export default class Routes extends React.Component<AppState, {}> {
             <AnalysisBuilder
               id={props.match.params.id}
               updatedAnalysis={() => this.props.loadAnalyses()}
-              userOwns={this.props.analyses.filter((x) => x.id === props.match.params.id).length > 0}
+              userOwns={
+                (this.props.analyses === null ? false
+                  : this.props.analyses.filter((x) => x.id === props.match.params.id).length > 0)
+              }
               datasets={this.props.datasets}
               doTooltip={true}
             />

neuroscout/frontend/src/coretypes.ts

@@ -317,8 +317,8 @@ export interface AuthStoreState {
 
 export interface AppState {
   loadAnalyses: () => void;
-  analyses: AppAnalysis[]; // List of analyses belonging to the user
-  publicAnalyses: AppAnalysis[]; // List of public analyses
+  analyses: (AppAnalysis[] | null); // List of analyses belonging to the user
+  publicAnalyses: (AppAnalysis[] | null); // List of public analyses
   auth: AuthStoreState;
   datasets: Dataset[];
   cloneAnalysis: (number) => void;