How can we lock (disable) the submit button while action is being executed?

[tats-u]

I want to pass disabled={true} to the submit button only while the local validation success and action is running.
However, this library doesn't seem to be designed to be able to do it.

https://www.rvf-js.io/reference/form-api#form-state

The competing component RVF can do this by monitoring isSubmitting.

[edmundhung]

Conform is designed to handle validation only and will prevent form submission if validation fails. However, the actual submission is left to the Remix <Form> component, which differs from RVF’s approach.

To disable the submit button while validation passes and the action is running, you can use Remix’s useNavigation or useFetcher to monitor the submission state:

import { Form, useNavigation } from "@remix-run/react";

function MyForm() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Form method="post">
      {/* form fields */}
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </Form>
  );
}

[tats-u]

Thank you for the information. I created the following hook and it looks like it works fine.

// WTFPLv2; take free and help yourself
function useIsSubmitting() {
  const [hasBeenIdle, setHasBeenIdle] = useState(false);
  const { state } = useNavigation();
  useEffect(() => {
    if (!hasBeenIdle && state === "idle") setHasBeenIdle(true);
  }, [state, hasBeenIdle]);
  return hasBeenIdle && state !== "idle";
}

[brunobely]

Is useFormStatus the Next.js equivalent?

[tats-u]

I don't know much about Next, but:

https://react.dev/reference/react-dom/hooks/useFormStatus

pending: A boolean. If true, this means the parent <form> is pending submission. Otherwise, false.

Anyway, the author concluded we should use a framework-native (Remix- or Next-) way instead

In Next I don't think we can use useNavigation.

[brunobely]

Yeah, doesn't look like this does the trick:

useFormStatus will not return status information for a <form> rendered in the same component.

So a user that injects their own <button type="submit /> into the form will be able to make multiple submissions. @edmundhung Is there a way conform could support this natively to prevent multiple submissions?

I'm not sure how they implement it, but Svelte's Superforms handles it nicely.