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/cypress/integration/common/OHIFStandaloneViewer.spec.js

@@ -1,6 +1,6 @@
 describe('OHIFStandaloneViewer', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.openStudyList();
   });
 
   it('loads route with at least 2 rows', () => {

platform/viewer/cypress/support/aliases.js

@@ -35,8 +35,8 @@ export function initCommonElementsAliases() {
 //Creating aliases for Routes
 export function initRouteAliases() {
   cy.server();
-  cy.route('GET', '/**/series/**').as('getStudySeries');
-  cy.route('GET', '/**/studies/**').as('getStudies');
+  cy.route('GET', '**/series**').as('getStudySeries');
+  cy.route('GET', '**/studies**').as('getStudies');
 }
 
 //Creating aliases for VTK tools buttons

platform/viewer/cypress/support/commands.js

@@ -39,20 +39,12 @@ import {
  * @param {string} PatientName - Patient name that we would like to search for
  */
 Cypress.Commands.add('openStudy', patientName => {
-  cy.initRouteAliases();
-  cy.visit('/');
-  cy.wrap(null).then(() => {
-    return new Cypress.Promise((resolve, reject) => {
-      cy.get('#patientName').type(patientName);
-      setTimeout(() => {
-        cy.get('#studyListData')
-          .contains(patientName)
-          .first()
-          .click();
-        resolve();
-      }, 2000);
-    });
-  });
+  cy.openStudyList();
+  cy.get('#patientName').type(patientName);
+  cy.wait('@getStudies');
+  cy.get('#studyListData .studylistStudy', { timeout: 5000 })
+    .contains(patientName)
+    .first().click();
 });
 
 /**
@@ -82,6 +74,12 @@ Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
   return cy.location('pathname', { timeout: 60000 }).should('include', url);
 });
 
+Cypress.Commands.add('openStudyList', patientName => {
+  cy.initRouteAliases();
+  cy.visit('/');
+  cy.wait('@getStudies');
+});
+
 /**
  * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
  * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)