@douglasneuroinformatics/libui 3.7.6 → 3.8.0

package/dist/components.d.ts

@@ -1247,9 +1247,10 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     resetBtn?: boolean;
     revalidateOnBlur?: boolean;
     submitBtnLabel?: string;
+    suspendWhileSubmitting?: boolean;
     validationSchema: z.ZodType<TData>;
 };
-declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, suspendWhileSubmitting, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
 
 type HeadingProps = {
     children: string;

package/dist/components.js

@@ -3445,6 +3445,7 @@ var Form = ({
   resetBtn,
   revalidateOnBlur,
   submitBtnLabel,
+  suspendWhileSubmitting,
   validationSchema,
   ...props
 }) => {
@@ -3454,6 +3455,7 @@ var Form = ({
   const [values, setValues] = useState8(
     initialValues ? getInitialValues(initialValues) : {}
   );
+  const [isSubmitting, setIsSubmitting] = useState8(false);
   const handleError = (error) => {
     const fieldErrors = {};
     for (const issue of error.issues) {
@@ -3481,14 +3483,21 @@ var Form = ({
     }
   };
   const handleSubmit = async (event) => {
-    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);
     }
   };
   const isGrouped = Array.isArray(content);
@@ -3505,6 +3514,7 @@ var Form = ({
   useEffect10(() => {
     revalidate();
   }, [resolvedLanguage]);
+  const isSuspended = Boolean(suspendWhileSubmitting && isSubmitting);
   return /* @__PURE__ */ jsxs47(
     "form",
     {
@@ -3547,7 +3557,35 @@ var Form = ({
         fieldsFooter,
         /* @__PURE__ */ jsxs47("div", { className: "flex w-full gap-3", children: [
           additionalButtons?.left,
-          /* @__PURE__ */ jsx136(Button, { "aria-label": "Submit", className: "block w-full", disabled: readOnly, type: "submit", variant: "primary", children: submitBtnLabel ?? t("form.submit") }),
+          /* @__PURE__ */ jsxs47(
+            Button,
+            {
+              "aria-label": "Submit",
+              className: "flex w-32 items-center justify-center gap-2",
+              disabled: readOnly || isSuspended,
+              type: "submit",
+              variant: "primary",
+              children: [
+                submitBtnLabel ?? t("form.submit"),
+                /* @__PURE__ */ jsx136(
+                  "svg",
+                  {
+                    className: cn("hidden h-4 w-4 animate-spin", isSuspended && "block"),
+                    fill: "none",
+                    height: "24",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx136("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                  }
+                )
+              ]
+            }
+          ),
           resetBtn && /* @__PURE__ */ jsx136(
             Button,
             {