isPending example (I cannot create PR)

[somewonderfulguy]

Hi, @jherr!

I tried to create PR, but I don't have rights to push a branch. Maybe I'm doing it in a wrong way.

I'm not sure it is needed for this repo, but I think it could be very helpful for other people.
You example lacks isPending example and it is actually very helpful - you can disable submit button or show loader.

useActionState (formerly useFormState) has isPending but it doesn't work when using with react-hook-form.
But we can do it using useTransition.

I wanted to create PR and still could do it if permissions granted.

The changes I made:

// MailForm.tsx

// ...
import { useRef, useTransition } from "react";
// ...
const [isPending, startTransition] = useTransition();
// ...
startTransition(() => {
  formAction(new FormData(formRef.current!));
});
// ...
<Button type="submit" disabled={isPending}>{isPending ? "Submitting..." : "Submit"}</Button>
// ...

And small delay so we can see it:

// formSubmit.ts

// ...
export async function onSubmitAction(/*...*/) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
// ...

[somewonderfulguy]

Interestingly, that it is also to possible to do it this way:

const [{ serverErrors }, formAction, isPendingAction] = useActionState(updateProfileAction, {})
const [, startTransition] = useTransition()

You just need to trigger transition.
But, of course, when JS disabled, no dynamic change, to show loaders or disabling buttons/inputs.