@douglasneuroinformatics/libui 3.8.2 → 3.8.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "packageManager": "pnpm@9.14.2",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",

package/src/components/Form/Form.stories.tsx

@@ -3,6 +3,7 @@
 
 import { useEffect, useState } from 'react';
 
+import { sleep } from '@douglasneuroinformatics/libjs';
 import type { FormFields } from '@douglasneuroinformatics/libui-form-types';
 import type FormTypes from '@douglasneuroinformatics/libui-form-types';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -509,3 +510,24 @@ export const WithPreventReset: StoryObj<typeof Form<SimpleExampleFormSchemaType>
     validationSchema: $SimpleExampleFormData
   }
 };
+
+export const WithSuspend: StoryObj<typeof Form<z.ZodType<FormTypes.Data>, { delay?: number }>> = {
+  args: {
+    content: {
+      delay: {
+        kind: 'number',
+        label: 'Delay (Seconds)',
+        variant: 'input'
+      }
+    },
+    suspendWhileSubmitting: true,
+    onSubmit: async (data) => {
+      await sleep(data.delay!);
+      // eslint-disable-next-line no-console
+      console.log(JSON.stringify(data, (_key, value) => (value instanceof Set ? [...value] : (value as unknown)), 2));
+    },
+    validationSchema: z.object({
+      delay: z.number().nonnegative().default(0)
+    })
+  }
+};

package/src/components/Form/Form.tsx

@@ -101,22 +101,23 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    const minSubmitTime = new Promise<void>((resolve) =>
-      suspendWhileSubmitting ? setTimeout(resolve, 500) : resolve()
-    );
+    event.preventDefault();
+    const result = await validationSchema.safeParseAsync(values);
+    if (!result.success) {
+      console.error(result.error.issues);
+      handleError(result.error);
+      return;
+    }
     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);
-      }
+      await Promise.all([
+        onSubmit(result.data),
+        new Promise<void>((resolve) => {
+          return suspendWhileSubmitting ? setTimeout(resolve, 500) : resolve();
+        })
+      ]);
+      reset();
     } finally {
-      await minSubmitTime;
       setIsSubmitting(false);
     }
   };
@@ -146,12 +147,13 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   return (
     <form
       autoComplete="off"
-      className={twMerge('w-full', isGrouped ? 'space-y-8 divide-y' : 'space-y-6', className)}
+      className={twMerge('relative w-full', isGrouped ? 'space-y-8 divide-y' : 'space-y-6', className)}
       id={id}
       onBlur={revalidateOnBlur ? revalidate : undefined}
       onSubmit={(event) => void handleSubmit(event)}
       {...props}
     >
+      {isSubmitting && <div className="absolute z-10 h-full w-full cursor-wait" />}
       {isGrouped ? (
         content.map((fieldGroup, i) => {
           return (