fix: missing isLoading state for form, to block while validating, and…

… submitting.

.changeset/gold-rules-join.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue": minor
+---
+
+fix: missing isLoading state for form, to block while validating, and submitting.

packages/vue/src/form.ts

@@ -387,11 +387,17 @@ export const buildFormFromSchema = <
   const parse = S.decodeUnknownSync<any, any>(S.Struct(Struct.omit(s.fields, "_tag")) as any)
   const isDirty = ref(false)
   const isValid = ref(true)
+  const isLoading = ref(false)
 
   const submit1 = <A>(onSubmit: (a: To) => Promise<A>) => async <T extends Promise<{ valid: boolean }>>(e: T) => {
-    const r = await e
-    if (!r.valid) return
-    return onSubmit(new s(parse(state.value)))
+    isLoading.value = true
+    try {
+      const r = await e
+      if (!r.valid) return
+      return onSubmit(new s(parse(state.value)))
+    } finally {
+      isLoading.value = false
+    }
   }
   const submit = submit1(onSubmit)
 
@@ -413,7 +419,9 @@ export const buildFormFromSchema = <
     /** optimized for Native form submit callback or general use */
     submitFromState,
     isDirty,
-    isValid
+    isValid,
+    /** includes whole submit, including potential asynchronous validation steps */
+    isLoading
   }
 }
 

packages/vue/src/makeClient.ts

@@ -615,13 +615,19 @@ export const makeClient = <Locale extends string, R>(
     const parse = S.decodeUnknown<any, any, R>(schema)
     const isDirty = ref(false)
     const isValid = ref(true)
+    const isLoading = ref(false)
     const runPromise = Runtime.runPromise(getRuntime(runtime))
 
     const submit1 =
       (onSubmit: (a: To) => Effect<OnSubmitA, never, R>) => async <T extends Promise<{ valid: boolean }>>(e: T) => {
-        const r = await e
-        if (!r.valid) return
-        return runPromise(onSubmit(new s(await runPromise(parse(state.value)))))
+        isLoading.value = true
+        try {
+          const r = await e
+          if (!r.valid) return
+          return await runPromise(onSubmit(new s(await runPromise(parse(state.value)))))
+        } finally {
+          isLoading.value = false
+        }
       }
     const submit = submit1(onSubmit)
 
@@ -635,9 +641,8 @@ export const makeClient = <Locale extends string, R>(
     )
 
     const submitFromState = Effect.gen(function*() {
-      if (!isValid.value) return
       return yield* onSubmit(yield* parse(state.value))
-    }) // () => submit(Promise.resolve({ valid: isValid.value }))
+    })
 
     return {
       fields,
@@ -646,7 +651,8 @@ export const makeClient = <Locale extends string, R>(
       /** optimized for Native form submit callback or general use */
       submitFromState,
       isDirty,
-      isValid
+      isValid,
+      isLoading
     }
   }