fix: 🐛 Fix race condition when loading derived display sets (#1718)

When we have multiple SEGs/RTSTRUCTs we intend to load the most recent
by default.

BREAKING CHANGE: 🧨 However we start to load once the first set of metadata arrives. We need
to wait until all series metadata is fetched.

✅ Closes: #1715

Co-authored-by: James Petts <jamesapetts@gmail.com>

platform/viewer/src/components/ViewportGrid/ViewportGrid.js

@@ -24,6 +24,7 @@ const ViewportGrid = function(props) {
     studies,
     viewportData,
     children,
+    isStudyLoaded
   } = props;
 
   const rowSize = 100 / numRows;
@@ -37,6 +38,7 @@ const ViewportGrid = function(props) {
   const snackbar = useSnackbarContext();
 
   useEffect(() => {
+    if (isStudyLoaded) {
       viewportData.forEach(displaySet => {
         const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
 
@@ -51,7 +53,8 @@ const ViewportGrid = function(props) {
           });
         });
       });
-  }, [studies, viewportData]);
+    }
+  }, [studies, viewportData, isStudyLoaded]);
 
   const getViewportPanes = () =>
     layout.viewports.map((layout, viewportIndex) => {

platform/viewer/src/connectedComponents/Viewer.js

@@ -316,7 +316,7 @@ class Viewer extends Component {
 
           {/* MAIN */}
           <div className={classNames('main-content')}>
-            <ConnectedViewerMain studies={this.props.studies} />
+            <ConnectedViewerMain studies={this.props.studies} isStudyLoaded={this.props.isStudyLoaded} />
           </div>
 
           {/* RIGHT */}

platform/viewer/src/connectedComponents/ViewerMain.js

@@ -150,6 +150,7 @@ class ViewerMain extends Component {
       <div className="ViewerMain">
         {this.state.displaySets.length && (
           <ConnectedViewportGrid
+            isStudyLoaded={this.props.isStudyLoaded}
             studies={this.props.studies}
             viewportData={viewportData}
             setViewportData={this.setViewportData}

platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js

@@ -269,7 +269,8 @@ function ViewerRetrieveStudyData({
     const promises = Array(concurrentRequestsAllowed)
       .fill(null)
       .map(loadNextSeries);
-    await Promise.all(promises);
+
+    return await Promise.all(promises);
   };
 
   const loadStudies = async () => {