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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user