having a "loading" indicator in react for mutations :

[young valve]

Hi @worldly elm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To show a loading indicator or disable the login button during authentication, you do not need to wrap the sign-in logic with a custom useMutation as in your example. The Convex Auth API provides a built-in way to track the loading state.

When using the Convex Auth hooks, the signIn function returned by useAuthActions does not directly provide an isLoading or isPending state. However, the Convex Auth context exposes a signingIn boolean that indicates whether a sign-in is in progress. You can use this to disable your login button while loading.

Here’s how you can use it:

import { useAuthActions } from "@convex-dev/auth/react";

export function SignInButton() {
  const { signIn, signingIn } = useAuthActions();

  return (
    <button
      onClick={() => signIn("provider", params)}
      disabled={signingIn}
    >
      {signingIn ? "Signing in..." : "Sign in"}
    </button>
  );
}

• signingIn is true while the sign-in process is ongoing, so you can use it to disable the button or show a loading indicator.
• There is no need to wrap signIn in a useMutation for this purpose; useAuthActions already provides the necessary state.

Reference: ConvexAuthActionsContext API

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@worldly elm Kapa.ai is still learning and improving, please let me know how I did by reacting below.