(feat) O3-4022 Ward App add loading skeleton to bed divider (#1370)

* (feat) O3-4022 Ward App add loading skeleton to bed divider * Update packages/esm-ward-app/src/beds/bed-share-divider.component.tsx Co-authored-by: Dennis Kigen <[email protected]> * Update packages/esm-ward-app/src/beds/bed-share-divider.scss Co-authored-by: Dennis Kigen <[email protected]> * misc typo --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Nov 13, 2024 · cd0e638 · cd0e638
1 parent 9516380
commit cd0e638
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 41 deletions.
diff --git a/packages/esm-ward-app/src/beds/bed-share-divider.component.tsx b/packages/esm-ward-app/src/beds/bed-share-divider.component.tsx
@@ -0,0 +1,21 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './bed-share-divider.scss';
+
+interface BedShareDividerProps {
+  isLoading?: boolean;
+}
+
+const BedShareDivider: React.FC<BedShareDividerProps> = ({ isLoading }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.bedDivider}>
+      <div className={styles.bedDividerLine}></div>
+      {isLoading ? <SkeletonText /> : <Tag>{t('bedShare', 'Bed share')}</Tag>}
+      <div className={styles.bedDividerLine}></div>
+    </div>
+  );
+};
+
+export default BedShareDivider;
diff --git a/packages/esm-ward-app/src/beds/bed-share-divider.scss b/packages/esm-ward-app/src/beds/bed-share-divider.scss
@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+
+.bedDivider {
+  background-color: $ui-02;
+  color: $text-02;
+  padding: layout.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: $ui-05;
+  width: 30%;
+}
diff --git a/packages/esm-ward-app/src/beds/ward-bed.component.tsx b/packages/esm-ward-app/src/beds/ward-bed.component.tsx
@@ -2,40 +2,30 @@ import React, { type ReactNode } from 'react';
 import { type Bed } from '../types';
 import EmptyBed from './empty-bed.component';
 import styles from './ward-bed.scss';
-import { useTranslation } from 'react-i18next';
-import { Tag } from '@carbon/react';
+import BedShareDivider from './bed-share-divider.component';
 
 export interface WardBedProps {
   patientCards: Array<ReactNode>;
   bed: Bed;
+  isLoadingDivider?: boolean;
 }
 
-const WardBed: React.FC<WardBedProps> = ({ bed, patientCards }) => {
-  return patientCards?.length > 0 ? <OccupiedBed bed={bed} patientCards={patientCards} /> : <EmptyBed bed={bed} />;
+const WardBed: React.FC<WardBedProps> = (props) => {
+  const { bed, patientCards } = props;
+  return patientCards?.length > 0 ? <OccupiedBed {...props} /> : <EmptyBed bed={bed} />;
 };
 
-const OccupiedBed: React.FC<WardBedProps> = ({ patientCards }) => {
+const OccupiedBed: React.FC<WardBedProps> = ({ patientCards, isLoadingDivider }) => {
   // interlace patient card with bed dividers between each of them
   const patientCardsWithDividers = patientCards.flatMap((patientCard, index) => {
     if (index == 0) {
       return [patientCard];
     } else {
-      return [<BedShareDivider key={'divider-' + index} />, patientCard];
+      return [<BedShareDivider key={'divider-' + index} isLoading={isLoadingDivider} />, patientCard];
     }
   });
 
   return <div className={styles.occupiedBed}>{patientCardsWithDividers}</div>;
 };
 
-const BedShareDivider = () => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.bedDivider}>
-      <div className={styles.bedDividerLine}></div>
-      <Tag>{t('bedShare', 'Bed share')}</Tag>
-      <div className={styles.bedDividerLine}></div>
-    </div>
-  );
-};
-
 export default WardBed;
diff --git a/packages/esm-ward-app/src/beds/ward-bed.scss b/packages/esm-ward-app/src/beds/ward-bed.scss
@@ -9,20 +9,6 @@
   height: fit-content;
 }
 
-.bedDivider {
-  background-color: vars.$ui-02;
-  color: vars.$text-02;
-  padding: layout.$spacing-01;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.bedDividerLine {
-  height: 1px;
-  background-color: vars.$ui-05;
-  width: 30%;
-}
 .emptyBed {
   display: flex;
   gap: layout.$spacing-04;
@@ -42,4 +28,4 @@
 .emptyBedText {
   @include type.type-style('heading-compact-01');
   color: vars.$text-02;
-}
+}
diff --git a/packages/esm-ward-app/src/types/index.ts b/packages/esm-ward-app/src/types/index.ts
@@ -248,6 +248,7 @@ export interface PatientAndAdmission {
 export interface MotherChildRelationships {
   motherByChildUuid: Map<string, PatientAndAdmission>;
   childrenByMotherUuid: Map<string, PatientAndAdmission[]>;
+  isLoading: boolean;
 }
 
 export interface MaternalWardViewContext {

diff --git a/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-beds.component.tsx b/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-beds.component.tsx
@@ -6,7 +6,7 @@ import { bedLayoutToBed } from '../ward-view.resource';
 import MaternalWardPatientCard from './maternal-ward-patient-card.component';
 
 const MaternalWardBeds: React.FC<MotherChildRelationships> = (motherChildRelationships) => {
-  const { motherByChildUuid } = motherChildRelationships ?? {};
+  const { motherByChildUuid, isLoading: isLoadingMotherChildRelationships } = motherChildRelationships ?? {};
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { bedLayouts, wardAdmittedPatientsWithBed } = wardPatientGroupDetails ?? {};
 
@@ -56,7 +56,14 @@ const MaternalWardBeds: React.FC<MotherChildRelationships> = (motherChildRelatio
       />
     ));
 
-    return <WardBed key={bed.uuid} bed={bed} patientCards={patientCards} />;
+    return (
+      <WardBed
+        key={bed.uuid}
+        bed={bed}
+        patientCards={patientCards}
+        isLoadingDivider={isLoadingMotherChildRelationships}
+      />
+    );
   });
 
   return <>{wardBeds}</>;

diff --git a/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-view.resource.ts b/packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-view.resource.ts
@@ -2,12 +2,15 @@ import { showNotification } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMotherAndChildren, type MothersAndChildrenSearchCriteria } from '../../hooks/useMotherAndChildren';
-import { type PatientAndAdmission } from '../../types';
+import { type MotherChildRelationships, type PatientAndAdmission } from '../../types';
 
 const motherAndChildrenRep =
   'custom:(childAdmission,mother:(person,identifiers:full,uuid),child:(person,identifiers:full,uuid),motherAdmission)';
 
-export function useMotherChildrenRelationshipsByPatient(allWardPatientUuids: string[], fetch: boolean) {
+export function useMotherChildrenRelationshipsByPatient(
+  allWardPatientUuids: string[],
+  fetch: boolean,
+): MotherChildRelationships {
   const { t } = useTranslation();
 
   const getChildrenRequestParams: MothersAndChildrenSearchCriteria = {
@@ -53,12 +56,9 @@ export function useMotherChildrenRelationshipsByPatient(allWardPatientUuids: str
   }
 
   const relationships = useMemo(() => {
-    if (isLoadingChildrenData || isLoadingMotherData) {
-      return null;
-    }
-
     const motherByChildUuid = new Map<string, PatientAndAdmission>();
     const childrenByMotherUuid = new Map<string, PatientAndAdmission[]>();
+    const isLoading = isLoadingChildrenData || isLoadingMotherData;
 
     for (const { child, childAdmission, mother, motherAdmission } of motherData ?? []) {
       motherByChildUuid.set(child.uuid, { patient: mother, currentAdmission: motherAdmission });
@@ -82,7 +82,7 @@ export function useMotherChildrenRelationshipsByPatient(allWardPatientUuids: str
       }
     }
 
-    return { motherByChildUuid, childrenByMotherUuid };
+    return { motherByChildUuid, childrenByMotherUuid, isLoading };
   }, [childrenData, motherData, isLoadingChildrenData, isLoadingMotherData]);
 
   return relationships;