Form action loading state (to prevent duplicate submissions)

[mauriciabad]

Hi, I have a form with an action, and I want to disable the submit button when it is submitted until the action failed or succeeded to prevent a form being submitted multiple times with the same data.

I could have a hasBeenSubmitted useState and set it manually onSubmit, but then I have no way of re-enabling the button in case the action throws an error.

I also tried using useActionData, but if the action trows an error, it goes to an error page and doesn't return anything, so the hook is always returning undefined. Moreover, using this hook seems too convoluted for just a loading state...

The documentation doesn't mention anything about action's loading state, which for me is a basic feature... So I must be missing something in this "loader/action" paradigm. It seems not possible that there's no built-in way to display a "Loading..." text while a form is being submitted...

[kiliman]

You want the useNavigation hook. This returns the current navigation state, including form submissions. It also has the pending formData, for optimistic UI.

https://remix.run/docs/en/main/hooks/use-navigation

const navigation = useNavigation() 

return (
  <Form method="post">
    <button disabled={navigation.state === 'submitting'}>Submit</button>
  </Form>
)

[artemis-prime]

What if you're using fetcher instead?

[kiliman]

Fetchers have their own state: fetcher.state

Also, useFetchers will return all active fetchers, so you can use that from other routes to get a holistic view of fetchers or find one by key.