fix(auth): disable submit button during login process

- Add loading state to the submit button in SigninWithPassword component to prevent multiple submissions.
- Use utility function to conditionally apply styles based on the loading state, enhancing user experience.
This commit is contained in:
AmirReza Jamali
2026-02-14 10:20:20 +03:30
parent da82399d07
commit f491a4047d
+6 -1
View File
@@ -5,6 +5,7 @@ import { FormErrorMessages } from "@/constants/Texts";
import { useLoginQuery } from "@/hooks/queries";
import { ILoginCredentials } from "@/lib/api";
import { COOKIE_KEYS } from "@/lib/shared/cookies";
import { cn } from "@/lib/utils";
import { useIsMutating } from "@tanstack/react-query";
import Cookies from "js-cookie";
import { useState } from "react";
@@ -71,7 +72,11 @@ export default function SigninWithPassword() {
<div className="mb-4.5">
<button
type="submit"
className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary p-4 font-medium text-white transition hover:bg-opacity-90"
disabled={!!isMutating}
className={cn(
"flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary p-4 font-medium text-white transition hover:bg-opacity-90",
isMutating && "cursor-not-allowed bg-primary/50",
)}
>
{isMutating ? (
<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>