Is there any way to avoid the useIsSubmitting being true for all actions buttons in a form?

[rahulpsingh]

To start with, I read the note saying we should add type="reset" or type="reset" to the button attribute to avoid the useIsSubmitting() to return true. I have an use case and I think many can have this, is there any way to have more than one actions in one form? My code Looks like this:

Button:

const Button = ({ children, hasLightSpinner = false, ...rest }) => {
  const isSubmitting = useIsSubmitting()
  return (
    <button
      {...rest}
      className={`${
        rest.className || ''
      } shadow sm:rounded-md md:rounded-md lg:rounded-md`}>
      {isSubmitting && <Spinner size="sm" light={hasLightSpinner} />}
      {children}
    </button>
  )
}

The Form:

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");
  if (intent === "save") {
    // save the form
  } else if (intent === "delete") {
    // delete the form
  }
}

const CustomForm = ({ children, ...props }) => {
  return (
    <ValidatedForm
      validator={validator}
      className="flex flex-col gap-3"
      defaultValues={{
        ...values,
      }}
      method="post"
    >
      ...other inputs
      <div className="flex items-end gap-4">
        <Button
          id="submit"
          type="submit"
          name="intent"
          value="save"
          className="px-6"
        >
          Save
        </Button>
        <Button
          id="delete"
          type="submit"
          color="failure"
          name="intent"
          value="delete"
          className="px-6"
        >
          Delete
        </Button>
      </div>
    </ValidatedForm>
  );
};

Is there any way to avoid the isSubmitting being true for both buttons at once?