From 02ce7459a0392dd1c13da9dde98ef8e21dc4b042 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 10 Dec 2024 12:04:55 +0300
Subject: [PATCH] (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 | 11 ++++---
 src/components/sidebar/sidebar.scss          |  5 ++++
 src/form-engine.component.tsx                | 30 +++++++++++---------
 src/form-engine.scss                         |  8 ++++++
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/sidebar/sidebar.component.tsx b/src/components/sidebar/sidebar.component.tsx
index 10d117010..fbe0522bb 100644
--- a/src/components/sidebar/sidebar.component.tsx
+++ b/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;
diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
index 9b79e2d53..7f08a22c5 100644
--- a/src/components/sidebar/sidebar.scss
+++ b/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 {
diff --git a/src/form-engine.component.tsx b/src/form-engine.component.tsx
index 19ce19c67..889d60aaa 100644
--- a/src/form-engine.component.tsx
+++ b/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') + '...'} />
                       ) : (
diff --git a/src/form-engine.scss b/src/form-engine.scss
index 3bee40945..a66ed846f 100644
--- a/src/form-engine.scss
+++ b/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;
+  }
+}