feat: append loading on the location attribute combobox

openmrs · Oct 22, 2024 · 83d841b · 83d841b
1 parent 2f73d02
commit 83d841b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 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
@@ -119,9 +119,10 @@
   position: relative;
 
   .loadingContainer {
+    background-color: colors.$white;
     position: absolute;
-    right: -6rem;
-    bottom: 0;
+    right: layout.$spacing-07;
+    bottom: layout.$spacing-02;
   }
 }
 

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
@@ -6,7 +6,6 @@ import styles from './../field.scss';
 import { useLocations } from './location-person-attribute-field.resource';
 import { ComboBox, InlineLoading, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 
 export interface LocationPersonAttributeFieldProps {
   id: string;
@@ -24,7 +23,6 @@ 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>('');
@@ -76,7 +74,6 @@ export function LocationPersonAttributeField({
   return (
     <div
       className={classNames(styles.customField, styles.halfWidthInDesktopView, styles.locationAttributeFieldContainer)}>
-      {loadingNewData && isTablet && <InlineLoading description="Loading..." />}
       <Layer>
         <Field name={fieldName}>
           {({ field, form: { touched, errors } }) => {
@@ -98,9 +95,9 @@ export function LocationPersonAttributeField({
           }}
         </Field>
       </Layer>
-      {loadingNewData && !isTablet && (
+      {loadingNewData && (
         <div className={styles.loadingContainer}>
-          <InlineLoading description="Loading..." />
+          <InlineLoading />
         </div>
       )}
     </div>