Improved the loading state UI in the Form Renderer Component

src/components/action-buttons/action-buttons.component.tsx

@@ -22,13 +22,16 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
   const { form, mutate } = useForm(formUuid);
   const [status, setStatus] = useState<Status>('idle');
   const [showUnpublishModal, setShowUnpublishModal] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const launchUnpublishModal = () => {
     setShowUnpublishModal(true);
   };
 
   async function handlePublish() {
     setStatus('publishing');
+    setShowError(false);
     try {
       await publishForm(form.uuid);
 
@@ -49,6 +52,8 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
           subtitle: error?.message,
         });
         setStatus('error');
+        setShowError(true);
+        setErrorMessage(error.message);
       }
     }
   }
@@ -86,6 +91,17 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
       <SaveFormModal form={form} schema={schema} />
 
       <>
+        {/* Error message display */}
+        {showError && (
+          <div className={styles.errorMessage}>
+            <p>{errorMessage}</p>
+            {/* Retry button */}
+            <Button kind="secondary" onClick={handlePublish}>
+              {t('retry', 'Retry')}
+            </Button>
+          </div>
+        )}
+
         {form && !form.published ? (
           <Button kind="secondary" onClick={handlePublish} disabled={status === 'publishing'}>
             {status === 'publishing' && !form?.published ? (

src/components/form-renderer/form-renderer.component.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
-import { Button, InlineLoading, Tile } from '@carbon/react';
+import { Button, Loading, Tile } from '@carbon/react';
 import { type OHRIFormSchema, OHRIForm } from '@openmrs/openmrs-form-engine-lib';
 import styles from './form-renderer.scss';
 
@@ -16,6 +16,18 @@ interface FormRendererProps {
   schema: OHRIFormSchema;
 }
 
+// enhance loading state with a progress bar or an animated loader
+const LoadingUI = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.loadingContainer}>
+      {/* animated loading indicator */}
+      <Loading description={t('loading', 'Loading')} withOverlay={false} />
+      <p className={styles.loadingText}>{t('loadingForm', 'Loading form...')}</p>
+    </div>
+  );
+};
+
 const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
   const { t } = useTranslation();
 
@@ -58,11 +70,8 @@ const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
   }, [schema]);
 
   if (isLoading) {
-    return (
-      <div className={styles.loadingContainer}>
-        <InlineLoading className={styles.loader} description={t('loading', 'Loading') + '...'} />
-      </div>
-    );
+    // render the enhanced loading UI
+    return <LoadingUI />;
   }
 
   return (

src/hooks/useClobdata.ts

@@ -2,13 +2,16 @@ import useSWRImmutable from 'swr/immutable';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import type { Form, Schema } from '../types';
 
+function hasValidResources(form?: Form) {
+  return form?.resources?.some(({ name, valueReference }) => name === 'JSON schema' && valueReference != null);
+}
+
 export const useClobdata = (form?: Form) => {
   const valueReferenceUuid = form?.resources?.find(({ name }) => name === 'JSON schema')?.valueReference;
-  const formHasResources = form && form?.resources?.length > 0 && valueReferenceUuid;
   const url = `${restBaseUrl}/clobdata/${valueReferenceUuid}`;
 
   const { data, error, isLoading, isValidating, mutate } = useSWRImmutable<{ data: Schema }, Error>(
-    formHasResources ? url : null,
+    hasValidResources(form) ? url : null,
     openmrsFetch,
   );