loading state for mutation

Are there any examples showing a loading state (spinner) while a mutation is in progress?

3 Replies

In React, something like

const [isMutating, setIsMutating] = useState(false);
const mutate = useMutation(api.foo.bar);

return (<div>
  {isMutating && <Loading/>}
  <button onClick={async () => {
    setIsMutating(true);
    await mutate()
    setIsMutating(false);
  }}>click me!</button>
</div>);

const [isMutating, setIsMutating] = useState(false);
const mutate = useMutation(api.foo.bar);

return (<div>
  {isMutating && <Loading/>}
  <button onClick={async () => {
    setIsMutating(true);
    await mutate()
    setIsMutating(false);
  }}>click me!</button>
</div>);

you could add some error handling if mutate could throw

igor9silvaOP•2mo ago

hmmm, in that case I'm might just use TanStack's useMutation

iScream•2mo ago

Plus I check against undefined to show the spinner, and a “no data” component in case of null response to allow backend to say something like “not found”.

loading state for mutation

Did you find this page helpful?