feat(OHIFStandaloneViewer.js): adding NProgress loading bar on top of the page

src/connectedComponents/FlexboxLayout.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 class FlexboxLayout extends Component {
   static propTypes = {
-    studies: PropTypes.array.isRequired,
+    studies: PropTypes.array,
     leftSidebarOpen: PropTypes.bool.isRequired,
     rightSidebarOpen: PropTypes.bool.isRequired,
   };
@@ -19,11 +19,23 @@ class FlexboxLayout extends Component {
   };
 
   componentDidMount() {
-    const studiesForBrowser = this.getStudiesForBrowser();
+    if (this.props.studies) {
+      const studiesForBrowser = this.getStudiesForBrowser();
 
-    this.setState({
-      studiesForBrowser,
-    });
+      this.setState({
+        studiesForBrowser,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.studies !== prevProps.studies) {
+      const studiesForBrowser = this.getStudiesForBrowser();
+
+      this.setState({
+        studiesForBrowser,
+      });
+    }
   }
 
   getStudiesForBrowser = () => {

src/connectedComponents/Viewer.js

@@ -165,9 +165,25 @@ class Viewer extends Component {
       onMeasurementsUpdated: this.onMeasurementsUpdated,
     });
 
-    const patientId = studies[0] && studies[0].patientId;
-    timepointApi.retrieveTimepoints({ patientId });
-    measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
+    this.currentTimepointId = currentTimepointId;
+    this.timepointApi = timepointApi;
+    this.measurementApi = measurementApi;
+
+    if (studies) {
+      const patientId = studies[0] && studies[0].patientId;
+      timepointApi.retrieveTimepoints({ patientId });
+      measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.studies !== prevProps.studies) {
+      const { studies } = this.props;
+      const patientId = studies[0] && studies[0].patientId;
+      const currentTimepointId = this.currentTimepointId;
+      this.timepointApi.retrieveTimepoints({ patientId });
+      this.measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
+    }
   }
 
   render() {

src/connectedComponents/ViewerMain.js

@@ -9,7 +9,7 @@ import React from 'react';
 class ViewerMain extends Component {
   static propTypes = {
     activeViewportIndex: PropTypes.number.isRequired,
-    studies: PropTypes.array.isRequired,
+    studies: PropTypes.array,
     viewportSpecificData: PropTypes.object.isRequired,
     layout: PropTypes.object.isRequired,
     setViewportSpecificData: PropTypes.func.isRequired,
@@ -59,11 +59,23 @@ class ViewerMain extends Component {
     //window.addEventListener('beforeunload', unloadHandlers.beforeUnload);
 
     // Get all the display sets for the viewer studies
-    const displaySets = this.getDisplaySets(this.props.studies);
+    if (this.props.studies) {
+      const displaySets = this.getDisplaySets(this.props.studies);
 
-    this.setState({
-      displaySets,
-    });
+      this.setState({
+        displaySets,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.studies !== prevProps.studies) {
+      const displaySets = this.getDisplaySets(this.props.studies);
+
+      this.setState({
+        displaySets,
+      });
+    }
   }
 
   getViewportData = () => {
@@ -125,14 +137,16 @@ class ViewerMain extends Component {
   render() {
     return (
       <div className="ViewerMain">
-        <ConnectedLayoutManager
+        {this.state.displaySets.length && (
+          <ConnectedLayoutManager
           studies={this.props.studies}
           viewportData={this.getViewportData()}
           setViewportData={this.setViewportData}
-        >
-          {/* Children to add to each viewport that support children */}
-          <ConnectedToolContextMenu />
-        </ConnectedLayoutManager>
+          >
+            {/* Children to add to each viewport that support children */}
+            <ConnectedToolContextMenu />
+          </ConnectedLayoutManager>
+        )}
       </div>
     );
   }

src/connectedComponents/ViewerRetrieveStudyData.js

@@ -75,8 +75,6 @@ class ViewerRetrieveStudyData extends Component {
   render() {
     if (this.state.error) {
       return <div>Error: {JSON.stringify(this.state.error)}</div>;
-    } else if (!this.state.studies) {
-      return <div>Loading...</div>;
     }
 
     return (