feat: add loading status for searching location

openmrs · Oct 22, 2024 · 2f73d02 · 2f73d02
1 parent 7ba2181
commit 2f73d02
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
@@ -115,6 +115,16 @@
   margin-bottom: layout.$spacing-05;
 }
 
+.locationAttributeFieldContainer {
+  position: relative;
+
+  .loadingContainer {
+    position: absolute;
+    right: -6rem;
+    bottom: 0;
+  }
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .grid {
     grid-template-columns: 1fr;

diff --git a/...atient-registration/field/person-attributes/location-person-attribute-field.component.tsx b/...atient-registration/field/person-attributes/location-person-attribute-field.component.tsx
@@ -1,11 +1,12 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Field, useField } from 'formik';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 import styles from './../field.scss';
 import { useLocations } from './location-person-attribute-field.resource';
-import { ComboBox, Layer } from '@carbon/react';
+import { ComboBox, InlineLoading, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 
 export interface LocationPersonAttributeFieldProps {
   id: string;
@@ -23,14 +24,21 @@ export function LocationPersonAttributeField({
   required,
 }: LocationPersonAttributeFieldProps) {
   const { t } = useTranslation();
+  const isTablet = !isDesktop(useLayoutType());
   const fieldName = `attributes.${personAttributeType.uuid}`;
   const [field, meta, { setValue }] = useField(`attributes.${personAttributeType.uuid}`);
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { locations } = useLocations(locationTag || null, searchQuery);
+  const { locations, isLoading, loadingNewData } = useLocations(locationTag || null, searchQuery);
+  const prevLocationOptions = useRef([]);
 
   const locationOptions = useMemo(() => {
-    return locations.map(({ resource: { id, name } }) => ({ value: id, label: name }));
-  }, [locations]);
+    if (!(isLoading && loadingNewData)) {
+      const newOptions = locations.map(({ resource: { id, name } }) => ({ value: id, label: name }));
+      prevLocationOptions.current = newOptions;
+      return newOptions;
+    }
+    return prevLocationOptions.current;
+  }, [locations, isLoading, loadingNewData]);
 
   const selectedItem = useMemo(() => {
     if (typeof meta.value === 'string') {
@@ -66,7 +74,9 @@ export function LocationPersonAttributeField({
   );
 
   return (
-    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+    <div
+      className={classNames(styles.customField, styles.halfWidthInDesktopView, styles.locationAttributeFieldContainer)}>
+      {loadingNewData && isTablet && <InlineLoading description="Loading..." />}
       <Layer>
         <Field name={fieldName}>
           {({ field, form: { touched, errors } }) => {
@@ -82,11 +92,17 @@ export function LocationPersonAttributeField({
                 onChange={handleSelect}
                 selectedItem={selectedItem}
                 invalid={errors[fieldName] && touched[fieldName]}
+                typeahead
               />
             );
           }}
         </Field>
       </Layer>
+      {loadingNewData && !isTablet && (
+        <div className={styles.loadingContainer}>
+          <InlineLoading description="Loading..." />
+        </div>
+      )}
     </div>
   );
 }