feat: 🎸 Load spinner when selecting gcloud store. Add key on td (#1034)

* feat: 🎸 Load spinner when selecting gcloud store. Add key on td

* feat: 🎸 Code review. Translate loading study status

* feat: 🎸 Code review. Minor code refactoring

* fix: add missing study and index declerations

* test: Improviment on VTK beforeEach hook (#1057)

* feat: 🎸 Some improvements on table cell and react lifecycle

* feat: 🎸 Prevent component update on a not searchData changing

* feat: 🎸 Some cypress improv to pass ci

* feat: 🎸 Code reviewe and also fixing list for gcloud

* feat: 🎸 Code review. Add spinner on first load of store

* feat: 🎸 Code review. Centering loading list spinner icon

platform/viewer/src/googleCloud/DicomStorePickerModal.js

@@ -22,6 +22,8 @@ class DicomStorePickerModal extends Component {
   handleEvent = data => {
     const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
     this.props.setServers(servers);
+    // Force auto close
+    this.props.onClose();
   };
 
   render() {

platform/viewer/src/studylist/StudyListWithData.js

@@ -8,6 +8,7 @@ import { StudyList } from '@ohif/ui';
 import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
 import * as RoutesUtil from '../routes/routesUtil';
 import moment from 'moment';
+import isEqual from 'lodash.isequal';
 import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
 import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
 import filesToStudies from '../lib/filesToStudies.js';
@@ -20,8 +21,9 @@ import AppContext from '../context/AppContext';
 class StudyListWithData extends Component {
   static contextType = AppContext;
   state = {
-    searchData: {},
+    searchOutdated: true,
     studies: [],
+    searchingStudies: false,
     error: null,
     modalComponentId: null,
   };
@@ -62,6 +64,7 @@ class StudyListWithData extends Component {
     if (!this.props.server && appConfig.enableGoogleCloudAdapter) {
       this.setState({
         modalComponentId: 'DicomStorePicker',
+        searchOutdated: false,
       });
     } else {
       this.searchForStudies({
@@ -71,21 +74,33 @@ class StudyListWithData extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (!this.state.searchData && !this.state.studies) {
-      this.searchForStudies();
-    }
-    if (this.props.server !== prevProps.server) {
-      this.setState({
-        modalComponentId: null,
-        searchData: null,
-        studies: null,
-      });
+  componentDidUpdate(prevProps, prevState) {
+    const hasNewServer = !isEqual(this.props.server, prevProps.server);
+
+    const { searchOutdated, searchingStudies } = this.state;
+
+    if (!searchingStudies) {
+      if (hasNewServer) {
+        const { appConfig = {} } = this.context;
+
+        const newState = {
+          searchOutdated: true,
+          studies: null,
+        };
+        if (appConfig.enableGoogleCloudAdapter) {
+          newState.modalComponentId = null;
+        }
+        this.setState(newState);
+      }
+
+      if (searchOutdated) {
+        this.searchForStudies();
+      }
     }
   }
 
   searchForStudies = (searchData = StudyListWithData.defaultSearchData) => {
-    const { server } = this.props;
+    const { server = {} } = this.props;
     const filter = {
       patientId: searchData.patientId,
       patientName: searchData.patientName,
@@ -105,7 +120,9 @@ class StudyListWithData extends Component {
     // TODO: add sorting
     const promise = OHIF.studies.searchStudies(server, filter);
 
-    // Render the viewer when the data is ready
+    this.setState({
+      searchingStudies: true,
+    });
     promise
       .then(studies => {
         if (!studies) {
@@ -150,11 +167,15 @@ class StudyListWithData extends Component {
 
         this.setState({
           studies: sortedStudies,
+          searchingStudies: false,
+          searchOutdated: false,
         });
       })
       .catch(error => {
         this.setState({
           error: true,
+          searchingStudies: false,
+          searchOutdated: false,
         });
 
         throw new Error(error);
@@ -208,8 +229,6 @@ class StudyListWithData extends Component {
 
     if (this.state.error) {
       return <div>Error: {JSON.stringify(this.state.error)}</div>;
-    } else if (this.state.studies === null && !this.state.modalComponentId) {
-      return <div>Loading...</div>;
     }
 
     let healthCareApiButtons = null;
@@ -240,8 +259,9 @@ class StudyListWithData extends Component {
 
     const studyList = (
       <div className="paginationArea">
-        {this.state.studies ? (
+        {this.state.studies || this.state.searchingStudies ? (
           <StudyList
+            loading={this.state.searchingStudies}
             studies={this.state.studies}
             studyListFunctionsEnabled={this.props.studyListFunctionsEnabled}
             onImport={this.onImport}