avoid double click to submit in application form

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -7,7 +7,8 @@ import {
     RadioGroup,
     Checkbox,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    Stack, Box
+    Stack, Box,
+    CircularProgress
 } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
@@ -30,9 +31,7 @@ import { notifyActionSuccess } from 'utils/CommonFunction';
 import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
-import Loadable from 'components/Loadable';
-import { useState, useEffect, lazy } from 'react';
-const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+import { useState, useEffect, useRef } from 'react';
 import { checkPaymentSuspension } from "utils/Utils";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -50,6 +49,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
     const [val, setVal] = useState({});
     const [reloadPage, setReloadPage] = useState(false);
     const [isSubmitting, setSubmitting] = useState(false);
+    const submittingRef = useRef(false);
     const [tickAccept, setTickAccept] = useState(false);
 
     const [issueId, setIssueId] = useState(loadedData.issueId);
@@ -139,23 +139,30 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
             }),
         }),
         onSubmit: values => {
+            if (submittingRef.current) return;
+            submittingRef.current = true;
+
             if (!values.issueId) {
+                submittingRef.current = false;
                 setWarningTitle(intl.formatMessage({ id: "attention" }))
                 setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));
                 setIsWarningPopUp(true);
                 return;
             }
             if (!attachment) {
+                submittingRef.current = false;
                 setWarningTitle(intl.formatMessage({ id: "attention" }))
                 setWarningText(intl.formatMessage({ id: 'requireFile' }));
                 setIsWarningPopUp(true);
                 return;
             } else if (!attachment.size || attachment.size <= 0) {
+                submittingRef.current = false;
                 setWarningTitle(intl.formatMessage({ id: "attention" }))
                 setWarningText(intl.formatMessage({ id: 'requireValidFile' }));
                 setIsWarningPopUp(true);
                 return;
             } else if (attachment.size >= (10 * 1024 * 1034)) {
+                submittingRef.current = false;
                 setWarningTitle(intl.formatMessage({ id: "attention" }))
                 setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
                 setIsWarningPopUp(true);
@@ -166,6 +173,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                     url: UrlUtils.CHECK_OVERDUE,
                     onSuccess: (responData) => {
                         if (responData.haveOverdue) {
+                            submittingRef.current = false;
                             setVal(values);
                             setWarningTitle(intl.formatMessage({ id: "attention" }))
                             setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));
@@ -173,6 +181,14 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                         } else {
                             apply(values);
                         }
+                    },
+                    onFail: () => {
+                        submittingRef.current = false;
+                        setSubmitting(false);
+                    },
+                    onError: () => {
+                        submittingRef.current = false;
+                        setSubmitting(false);
                     }
                 });
             } else {
@@ -214,6 +230,8 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
             files: [attachment],
             onSuccess: function (responData) {
                 if (responData.msg) {
+                    submittingRef.current = false;
+                    setSubmitting(false);
                     setVal({});
                     setReloadPage(true);
                     setWarningTitle(intl.formatMessage({ id: "attention" }))
@@ -221,10 +239,19 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                     setIsWarningPopUp(true);
                     return;
                 }
-                setSubmitting(false)
+                submittingRef.current = false;
+                setSubmitting(false);
                 notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
                 navigate("/publicNotice");
                 // location.reload(); 
+            },
+            onFail: () => {
+                submittingRef.current = false;
+                setSubmitting(false);
+            },
+            onError: () => {
+                submittingRef.current = false;
+                setSubmitting(false);
             }
         });
     }
@@ -273,18 +300,12 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
             {/* <Grid item xs={12}>
                     <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
                 </Grid> */}
-            {
-                isSubmitting ?
-                    <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
-                        <LoadingComponent />
-                    </Grid>
-                    :
-                    <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
-                        <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
-
-                            {hasOptions ? (
-
-                            <form onSubmit={formik.handleSubmit}>
+            <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
+                <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+
+                    {hasOptions ? (
+
+                    <form onSubmit={formik.handleSubmit}>
                                 <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                                     {
                                         isDummyLoggedIn()?
@@ -615,7 +636,8 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
                                                     variant="contained"
                                                     type="submit"
-                                                    disabled={!tickAccept}
+                                                    disabled={!tickAccept || isSubmitting}
+                                                    startIcon={isSubmitting ? <CircularProgress size={20} color="inherit" /> : null}
                                                 >
                                                     <FormattedMessage id="applyPublicNotice" />
                                                 </Button>
@@ -635,9 +657,8 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                 </Grid>
                             </form>
                             ) : null}
-                        </Box>
-                    </Grid>
-            }
+                </Box>
+            </Grid>
             <div>
                 <Dialog
                     open={isWarningPopUp}