how to display loader on the whole page while form is submitted?

Question

Hey,

I have a server action that fetches data from an endpoint.
When i submit the form with submit button, i can disable the button with pending state. But this is not what i want. I want to block all the page and show a loader. I tried using pending in the form component but does not work. With regular react this always have been easy.any ideas how to achieve this?

Sun bear · Answer

I use tanstack query and then use the serveraction as mutate.

const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (formData) => {
      return fetch('/api', formData)
    },
  })
  const onSubmit = (event) => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }

  return <form onSubmit={onSubmit}>...</form>
}

https://tanstack.com/query/latest/docs/framework/react/guides/mutations

Then you can do sonething like:

return (
<>
{muation.isPending && (
<LoadingSpinner />
)}
...
</>
)

how to display loader on the whole page while form is submitted?

2 Replies