(fix) Fix submit button loading state (#439)

* (fix) Fix submit button loading state

Fixes an issue with the submit button not being disabled when the form is being submitted. Also tweaks the inline loading indicator shown in the button so that it doesn't take up extra vertical space.

* Review feedback

src/components/sidebar/sidebar.component.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-import { type FormPage, type SessionMode } from '../../types';
-import styles from './sidebar.scss';
-import { usePageObserver } from './usePageObserver';
-import { useCurrentActivePage } from './useCurrentActivePage';
+import { Button, InlineLoading } from '@carbon/react';
 import { isPageContentVisible } from '../../utils/form-helper';
-import { InlineLoading } from '@carbon/react';
+import { useCurrentActivePage } from './useCurrentActivePage';
+import { usePageObserver } from './usePageObserver';
+import type { FormPage, SessionMode } from '../../types';
+import styles from './sidebar.scss';
 
 interface SidebarProps {
   defaultPage: string;

src/components/sidebar/sidebar.scss

@@ -1,4 +1,5 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use '@carbon/type';
 
 .pageLink {
@@ -95,6 +96,10 @@
 .saveButton {
   @extend .button;
   margin-bottom: 0.625rem;
+
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
 }
 
 .closeButton {

src/form-engine.component.tsx

@@ -1,24 +1,24 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FormField, FormSchema, SessionMode } from './types';
-import { useSession, type Visit } from '@openmrs/esm-framework';
-import { isEmpty, useFormJson } from '.';
-import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
-import Loader from './components/loaders/loader.component';
-import { usePatientData } from './hooks/usePatientData';
-import { FormFactoryProvider } from './provider/form-factory-provider';
 import classNames from 'classnames';
-import styles from './form-engine.scss';
 import { Button, ButtonSet, InlineLoading } from '@carbon/react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
-import PatientBanner from './components/patient-banner/patient-banner.component';
-import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
+import { useSession, type Visit } from '@openmrs/esm-framework';
+import { FormFactoryProvider } from './provider/form-factory-provider';
 import { init, teardown } from './lifecycle';
-import { reportError } from './utils/error-utils';
+import { isEmpty, useFormJson } from '.';
 import { moduleName } from './globals';
+import { reportError } from './utils/error-utils';
 import { useFormCollapse } from './hooks/useFormCollapse';
-import Sidebar from './components/sidebar/sidebar.component';
 import { useFormWorkspaceSize } from './hooks/useFormWorkspaceSize';
 import { usePageObserver } from './components/sidebar/usePageObserver';
+import { usePatientData } from './hooks/usePatientData';
+import type { FormField, FormSchema, SessionMode } from './types';
+import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
+import Loader from './components/loaders/loader.component';
+import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
+import PatientBanner from './components/patient-banner/patient-banner.component';
+import Sidebar from './components/sidebar/sidebar.component';
+import styles from './form-engine.scss';
 
 interface FormEngineProps {
   patientUUID: string;
@@ -176,7 +176,11 @@ const FormEngine = ({
                       }}>
                       {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
                     </Button>
-                    <Button type="submit" disabled={isLoadingDependencies || mode === 'view'}>
+                    <Button
+                      className={styles.saveButton}
+                      disabled={isLoadingDependencies || isSubmitting || mode === 'view'}
+                      kind="primary"
+                      type="submit">
                       {isSubmitting ? (
                         <InlineLoading description={t('submitting', 'Submitting') + '...'} />
                       ) : (

src/form-engine.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 // replaces .formEngine
 .form {
   height: 100%;
@@ -138,3 +140,9 @@
     width: 10%;
   }
 }
+
+.saveButton {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}