diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 78cb439e..51186479 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -13,6 +13,7 @@ import type { Promisable } from 'type-fest'; import { z } from 'zod'; import { useTranslation } from '@/hooks'; +import { cn } from '@/utils'; import { Button } from '../Button'; import { Heading } from '../Heading'; @@ -40,6 +41,7 @@ type FormProps, TData extends z.TypeOf; }; @@ -58,6 +60,7 @@ const Form = , TData extends z.TypeOf) => { @@ -67,6 +70,7 @@ const Form = , TData extends z.TypeOf>( initialValues ? getInitialValues(initialValues) : {} ); + const [isSubmitting, setIsSubmitting] = useState(false); const handleError = (error: z.ZodError) => { const fieldErrors: FormErrors = {}; @@ -97,14 +101,21 @@ const Form = , TData extends z.TypeOf) => { - event.preventDefault(); - const result = await validationSchema.safeParseAsync(values); - if (result.success) { - reset(); - await onSubmit(result.data); - } else { - console.error(result.error.issues); - handleError(result.error); + const minSubmitTime = new Promise((resolve) => setTimeout(resolve, 500)); + try { + setIsSubmitting(true); + event.preventDefault(); + const result = await validationSchema.safeParseAsync(values); + if (result.success) { + reset(); + await onSubmit(result.data); + } else { + console.error(result.error.issues); + handleError(result.error); + } + } finally { + await minSubmitTime; + setIsSubmitting(false); } }; @@ -128,6 +139,8 @@ const Form = , TData extends z.TypeOf, TData extends z.TypeOf {additionalButtons?.left} {/** Note - aria-label is used for testing in downstream packages */} - {resetBtn && (