Merge pull request #4637 from unicef/loading-button-program

[AB#224937]-loading button program
unicef · Feb 20, 2025 · 85aebfd · 85aebfd
2 parents dd221a8 + 8faf2b6
commit 85aebfd
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 20 deletions.
diff --git a/src/frontend/src/components/programs/CreateProgram/PartnersStep.tsx b/src/frontend/src/components/programs/CreateProgram/PartnersStep.tsx
@@ -11,6 +11,7 @@ import { ProgramPartnerCard } from './ProgramPartnerCard';
 import { FormikSelectField } from '@shared/Formik/FormikSelectField';
 import { DividerLine } from '@core/DividerLine';
 import { partnerAccessChoices } from '@components/programs/constants';
+import { LoadingButton } from '@components/core/LoadingButton';
 
 interface PartnersStepProps {
   values;
@@ -21,6 +22,7 @@ interface PartnersStepProps {
   submitForm: () => void;
   setFieldValue;
   programId?: string;
+  loading: boolean;
 }
 
 export const PartnersStep: FC<PartnersStepProps> = ({
@@ -32,6 +34,7 @@ export const PartnersStep: FC<PartnersStepProps> = ({
   submitForm,
   setFieldValue,
   programId: formProgramId,
+  loading,
 }) => {
   const { t } = useTranslation();
   const { baseUrl, programId, businessArea } = useBaseUrl();
@@ -73,7 +76,7 @@ export const PartnersStep: FC<PartnersStepProps> = ({
   return (
     <>
       <Box display="flex" justifyContent="space-between" mt={2}>
-        <Grid size={{ xs:6 }}>
+        <Grid size={{ xs: 6 }}>
           <Field
             name="partnerAccess"
             label={t('Who should have access to the program?')}
@@ -157,14 +160,15 @@ export const PartnersStep: FC<PartnersStepProps> = ({
               {t('Back')}
             </Button>
           </Box>
-          <Button
+          <LoadingButton
             data-cy="button-save"
             variant="contained"
             color="primary"
             onClick={submitForm}
+            loading={loading}
           >
             {t('Save')}
-          </Button>
+          </LoadingButton>
         </Box>
       </Box>
     </>

diff --git a/src/frontend/src/components/programs/EditProgram/PartnersStep.tsx b/src/frontend/src/components/programs/EditProgram/PartnersStep.tsx
@@ -11,6 +11,7 @@ import { FormikSelectField } from '@shared/Formik/FormikSelectField';
 import { DividerLine } from '@core/DividerLine';
 import { partnerAccessChoices } from '@components/programs/constants';
 import { ProgramPartnerCard } from '../CreateProgram/ProgramPartnerCard';
+import { LoadingButton } from '@components/core/LoadingButton';
 
 interface PartnersStepProps {
   values;
@@ -19,6 +20,7 @@ interface PartnersStepProps {
   submitForm: () => void;
   setFieldValue;
   programId?: string;
+  loading: boolean;
 }
 
 export const PartnersStep: FC<PartnersStepProps> = ({
@@ -28,6 +30,7 @@ export const PartnersStep: FC<PartnersStepProps> = ({
   submitForm,
   setFieldValue,
   programId: formProgramId,
+  loading,
 }) => {
   const { t } = useTranslation();
   const { baseUrl, programId, businessArea } = useBaseUrl();
@@ -69,7 +72,7 @@ export const PartnersStep: FC<PartnersStepProps> = ({
   return (
     <>
       <Box display="flex" justifyContent="space-between" mt={2}>
-        <Grid size={{ xs:6 }}>
+        <Grid size={{ xs: 6 }}>
           <Field
             name="partnerAccess"
             label={t('Who should have access to the program?')}
@@ -145,14 +148,15 @@ export const PartnersStep: FC<PartnersStepProps> = ({
           </Button>
         </Box>
         <Box display="flex">
-          <Button
+          <LoadingButton
             data-cy="button-save"
             variant="contained"
             color="primary"
             onClick={submitForm}
+            loading={loading}
           >
             {t('Save')}
-          </Button>
+          </LoadingButton>
         </Box>
       </Box>
     </>

diff --git a/src/frontend/src/containers/pages/program/CreateProgramPage.tsx b/src/frontend/src/containers/pages/program/CreateProgramPage.tsx
@@ -52,7 +52,7 @@ export const CreateProgramPage = (): ReactElement => {
   const { data: pdusubtypeChoicesData, loading: pdusubtypeChoicesLoading } =
     usePduSubtypeChoicesDataQuery();
 
-  const [mutate] = useCreateProgramMutation({
+  const [mutate, { loading: loadingCreate }] = useCreateProgramMutation({
     refetchQueries: () => [
       { query: ALL_PROGRAMS_QUERY, variables: { businessArea } },
     ],
@@ -362,6 +362,7 @@ export const CreateProgramPage = (): ReactElement => {
                           setStep={setStep}
                           submitForm={submitForm}
                           setFieldValue={setFieldValue}
+                          loading={loadingCreate}
                         />
                       )}
                     </div>

diff --git a/src/frontend/src/containers/pages/program/DuplicateProgramPage.tsx b/src/frontend/src/containers/pages/program/DuplicateProgramPage.tsx
@@ -38,7 +38,7 @@ export const DuplicateProgramPage = (): ReactElement => {
   const { id } = useParams();
   const location = useLocation();
   const permissions = usePermissions();
-  const [mutate] = useCopyProgramMutation();
+  const [mutate, { loading: loadingCopy }] = useCopyProgramMutation();
   const [step, setStep] = useState(0);
   const { showMessage } = useSnackbar();
   const { baseUrl, businessArea } = useBaseUrl();
@@ -383,6 +383,7 @@ export const DuplicateProgramPage = (): ReactElement => {
                           submitForm={submitForm}
                           setFieldValue={setFieldValue}
                           programId={id}
+                          loading={loadingCopy}
                         />
                       )}
                     </div>

diff --git a/src/frontend/src/containers/pages/program/EditProgramPage.tsx b/src/frontend/src/containers/pages/program/EditProgramPage.tsx
@@ -60,18 +60,19 @@ export const EditProgramPage = (): ReactElement => {
   const { data: pdusubtypeChoicesData, loading: pdusubtypeChoicesLoading } =
     usePduSubtypeChoicesDataQuery();
 
-  const [updateProgramDetails] = useUpdateProgramMutation({
-    refetchQueries: [
-      {
-        query: ALL_LOG_ENTRIES_QUERY,
-        variables: {
-          objectId: decodeIdString(id),
-          count: 5,
-          businessArea,
+  const [updateProgramDetails, { loading: loadingUpdate }] =
+    useUpdateProgramMutation({
+      refetchQueries: [
+        {
+          query: ALL_LOG_ENTRIES_QUERY,
+          variables: {
+            objectId: decodeIdString(id),
+            count: 5,
+            businessArea,
+          },
         },
-      },
-    ],
-  });
+      ],
+    });
 
   const [updateProgramPartners] = useUpdateProgramPartnersMutation({
     refetchQueries: [
@@ -345,7 +346,6 @@ export const EditProgramPage = (): ReactElement => {
             errors,
             setErrors,
           }) => {
-
             const handleNextStep = async () => {
               await handleNext({
                 validateForm,
@@ -437,6 +437,7 @@ export const EditProgramPage = (): ReactElement => {
                       submitForm={submitForm}
                       setFieldValue={setFieldValue}
                       programId={id}
+                      loading={loadingUpdate}
                     />
                   </div>
                 </Fade>