Would it be possible for links to be disabled while submitting?

[ordago]

From the docs:

You can use the processing property to track if a form is currently being submitted. This can be helpful for preventing double form submissions, by disabling the submit button.

<button type="submit" :disabled="form.processing">Submit</button>

For links it says to render non GET Links as form buttons:

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

Is there a way to have the same functionality to prevent double form submissions with the Link component? If it doesn't exist it would be great if this was possible:

<Link disable-while-processing>Logout</Link>

[fw-abe]

I wanted to disable links in my navigation while my app was still pending an autosave. To do this I did this:

   // context is React:
   // `pendingSave` is the prop passed into the component
   // `navRef.current` is a react reference to the element containing the `<a>` elements I want to disable

    useEffect(() => {
        const processFunction = pendingSave
            ? el => el.setAttribute('disabled', '')
            : el => el.removeAttribute('disabled');

        navRef.current.querySelectorAll('a').forEach(processFunction);
    }, [pendingSave]);

However once I applied the disabled attribute I saw that Inertia navigations were still firing on the link clicks. I opened up this discussion: #1299

[joelstein]

I'd like to see something like this, as well.

In the meantime, here's a simple component that might help. It works well for me.

/**
 * A button that submits data with Inertia and tracks the processing state.
 */
export function InertiaButton({
  as: Component = "button",
  method = "post",
  url,
  data,
  children,
}) {
  const [processing, setProcessing] = useState();

  function onClick() {
    setProcessing(true);
    router.visit(url, {
      method,
      data,
      preserveScroll: true,
      onFinish: () => setProcessing(false),
    });
  }

  return (
    <Component onClick={onClick} disabled={processing}>
      {children}
    </Component>
  );
}