Add loading spinner to ContactNotLoaded placeholder component

plugin-hrm-form/src/___tests__/states/case/caseWorkingCopy.test.ts

@@ -449,6 +449,7 @@ describe('Working copy reducers', () => {
           cases: {
             1: {
               ...initialState.cases[1],
+              lastReferencedDate: expect.any(Date),
               caseWorkingCopy: {
                 ...initialState.cases[1].caseWorkingCopy,
                 caseSummary: {

plugin-hrm-form/src/components/ContactNotLoaded.tsx

@@ -15,12 +15,13 @@
  */
 
 import React from 'react';
-import { Box } from '@material-ui/core';
+import { Box, CircularProgress } from '@material-ui/core';
 import { Template } from '@twilio/flex-ui';
 
 import FormNotEditable from './FormNotEditable';
 import { HeaderContainer, Row } from '../styles';
 import { StyledLink } from '../styles/buttons';
+import { getTemplateStrings } from '../hrmConfig';
 
 type OwnProps = {
   onReload: () => Promise<void>;
@@ -32,8 +33,24 @@ type Props = OwnProps;
 const ContactNotLoaded: React.FC<Props> = ({ onReload, onFinish }: Props) => {
   const [reloadDisabled, setReloadDisabled] = React.useState(false);
   const [finishDisabled, setFinishDisabled] = React.useState(false);
+  const strings = getTemplateStrings();
   return (
-    <Box style={{ padding: '20px' }}>
+    <Box style={{ padding: '20px', position: 'relative', height: '100%' }}>
+      <Box
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          pointerEvents: 'none',
+        }}
+      >
+        <CircularProgress size={80} aria-label={strings['TabbedForms-ContactNotLoaded-Loading']} />
+      </Box>
       <HeaderContainer style={{ marginBottom: '10px' }}>
         <Template code="TabbedForms-ContactNotLoaded-Header" />
       </HeaderContainer>

plugin-hrm-form/src/translations/en-GB.json

@@ -163,6 +163,7 @@
   "TabbedForms-ContactNotLoaded-Header": "Contact not loaded, no data can be recorded",
   "TabbedForms-ContactNotLoaded-Retry": "Retry",
   "TabbedForms-ContactNotLoaded-Finish": "End Without Saving",
+  "TabbedForms-ContactNotLoaded-Loading": "Loading contact",
   "NotImplemented": "Not implemented yet!",
   "Error-Backend": "Error from backend system.",
   "Error-ContinueWithoutRecording": "Error from backend system.  Are you sure you want to end the task without recording?",

plugin-hrm-form/src/translations/en.json

@@ -173,6 +173,7 @@
   "TabbedForms-ContactNotLoaded-Header": "Contact not loaded, no data can be recorded",
   "TabbedForms-ContactNotLoaded-Retry": "Retry",
   "TabbedForms-ContactNotLoaded-Finish": "End Without Saving",
+  "TabbedForms-ContactNotLoaded-Loading": "Loading contact",
   "NotImplemented": "Not implemented yet!",
   "Error-Backend": "Error from backend system.",
   "Error-ContinueWithoutRecording": "Error from backend system.  Are you sure you want to end the task without recording?",

plugin-hrm-form/src/translations/es.json

@@ -98,6 +98,7 @@
   "TabbedForms-ContactNotLoaded-Header": "Contacto no cargado, no se pueden registrar datos",
   "TabbedForms-ContactNotLoaded-Retry": "Reintentar",
   "TabbedForms-ContactNotLoaded-Finish": "Terminar sin guardar",
+  "TabbedForms-ContactNotLoaded-Loading": "Cargando contacto",
   "CancelOfflineContact": "Cancelar Contacto ",
   "BottomBar-SendReport": "Enviar Reporte",
   "BottomBar-SendAnotherReport": "Enviar Otro Reporte",

plugin-hrm-form/src/translations/fr.json

@@ -174,6 +174,7 @@
 "TabbedForms-ContactNotLoaded-Header": "Contact non chargé, aucune donnée ne peut être enregistrée",
 "TabbedForms-ContactNotLoaded-Retry": "Réessayer",
 "TabbedForms-ContactNotLoaded-Finish": "Finir sans enregistrer",
+"TabbedForms-ContactNotLoaded-Loading": "Chargement du contact",
 "NotImplemented": "Pas encore implémenté!",
 "Error-Backend": "Erreur du système backend.",
 "Error-ContinueWithoutRecording": "Erreur du système backend. Voulez-vous vraiment terminer la tâche sans enregistrer ?",

plugin-hrm-form/src/translations/hu.json

@@ -97,6 +97,7 @@
   "TabbedForms-ContactNotLoaded-Header": "A névjegy nincs betöltve, adat nem rögzíthető",
   "TabbedForms-ContactNotLoaded-Retry": "Próbálja újra",
   "TabbedForms-ContactNotLoaded-Finish": "Mentés nélkül fejezze be",
+  "TabbedForms-ContactNotLoaded-Loading": "Névjegy betöltése",
   "CancelOfflineContact": "Az offline kapcsolat törlése",
   "BottomBar-SendReport": "Jelentés küldése",
   "BottomBar-SendAnotherReport": "Másik jelentés küldése",

plugin-hrm-form/src/translations/pt.json

@@ -97,6 +97,7 @@
   "TabbedForms-ContactNotLoaded-Header": "Contato não carregado, nenhum dado pode ser registrado",
   "TabbedForms-ContactNotLoaded-Retry": "Tentar novamente",
   "TabbedForms-ContactNotLoaded-Finish": "Terminar sem salvar",
+  "TabbedForms-ContactNotLoaded-Loading": "Carregando contato",
   "CancelOfflineContact": "Cancelar contato offline",
   "BottomBar-Next": "Próximo",
   "TabbedForms-BackButton": "Categorizar tipo de contato",

plugin-hrm-form/src/translations/th.json

@@ -359,6 +359,7 @@
   "TabbedForms-ContactNotLoaded-Header": "ไม่ได้โหลดรายชื่อติดต่อ ไม่สามารถบันทึกข้อมูลได้",
   "TabbedForms-ContactNotLoaded-Retry": "ลองอีกครั้ง",
   "TabbedForms-ContactNotLoaded-Finish": "สิ้นสุดโดยไม่บันทึก",
+  "TabbedForms-ContactNotLoaded-Loading": "กำลังโหลดรายชื่อติดต่อ",
   "TaskFilterActive": "ระหว่างดำเนินการ",
   "TaskFilterAll": "ทั้งหมด",
   "TaskFilterWrapping": "สำเร็จ",