packages/example/src/routes/form.tsx

@@ -2,7 +2,7 @@ import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { runtime } from "@/runtime"
 import { Button, Container, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Effect, Schema } from "effect"
+import { Effect, ParseResult, Schema } from "effect"
 import { Component, Form } from "effect-fc"
 import { useContext, useSubscribables } from "effect-fc/hooks"
 
@@ -24,7 +24,14 @@ const RegisterFormSchema = Schema.Struct({
 
 class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     scoped: Form.service({
-        schema: RegisterFormSchema,
+        schema: Schema.transformOrFail(
+            Schema.encodedSchema(RegisterFormSchema),
+            Schema.typeSchema(RegisterFormSchema),
+            {
+                decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
+                encode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
+            },
+        ),
         initialEncodedValue: { email: "", password: "" },
         submit: () => Effect.andThen(
             Effect.sleep("500 millis"),
@@ -49,12 +56,12 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
                 <Flex direction="column" gap="2">
                     <TextFieldFormInputFC
                         field={Form.useField(form, ["email"])}
-                        debounce="500 millis"
+                        debounce="200 millis"
                     />
 
                     <TextFieldFormInputFC
                         field={Form.useField(form, ["password"])}
-                        debounce="500 millis"
+                        debounce="200 millis"
                     />
 
                     <Button disabled={!canSubmit}>Submit</Button>