src/features/auth/ui/LoginForm/LoginForm.spec.tsx

@@ -21,9 +21,20 @@ describe("LoginForm", () => {
     expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
   });
 
-  it("enables submit button when form is valid", () => {
+  it("disables submit button when auth store status equals loading", () => {
     useAuthStore.getState().setEmail(MOCK_EMAIL);
     useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    useAuthStore.setState({ status: "loading" });
+
+    render(<LoginForm />);
+    expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
+  });
+
+  it("enables submit button when form is valid and auth store status isn't equal to loading", () => {
+    useAuthStore.getState().setEmail(MOCK_EMAIL);
+    useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    useAuthStore.setState({ status: "idle" });
+
     render(<LoginForm />);
     expect(screen.getByRole("button", { name: /login/i })).toBeEnabled();
   });
@@ -49,6 +60,7 @@ describe("LoginForm", () => {
 
     useAuthStore.getState().setEmail(MOCK_EMAIL);
     useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    useAuthStore.setState({ status: "idle" });
 
     render(<LoginForm />);
     const submitButton = screen.getByRole("button", { name: /login/i });

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -1,4 +1,8 @@
-import { selectFormValid, useAuthStore } from "../../model";
+import {
+  selectFormValid,
+  selectStatusIsLoading,
+  useAuthStore,
+} from "../../model";
 import type { SubmitEvent, ChangeEvent } from "react";
 
 /**
@@ -8,6 +12,9 @@ export function LoginForm() {
   const { formData, setEmail, setPassword, login } = useAuthStore();
 
   const formValid = useAuthStore(selectFormValid);
+  const isLoading = useAuthStore(selectStatusIsLoading);
+
+  const disabled = !formValid || isLoading;
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
@@ -36,7 +43,7 @@ export function LoginForm() {
         value={formData?.password?.value ?? ""}
         onChange={handlePasswordChange}
       />
-      <button type="submit" disabled={!formValid}>
+      <button type="submit" disabled={disabled}>
         Login
       </button>
     </form>