feat: Add loading states and improve form handling

This commit introduces several enhancements to form components and user experience across the application.

- **Sign-in Form:**
  - Implemented a loading state using `useIsMutating` from TanStack Query.
  - The username and password fields are now disabled during the login process to prevent concurrent submissions.
  - The "Sign in" button displays a spinner while the mutation is pending, providing clear visual feedback.

- **Assign to Company Modal:**
  - Refactored the modal to use `react-hook-form` for more robust state management and validation.
  - The form submission button is now disabled while the assignment request is in progress.

- **Tag Input Component:**
  - Added a new `shouldAddWithSpace` prop to allow creating tags by pressing the space bar, increasing the component's flexibility.

- **Header:**
  - Corrected the image path for the mobile header logo to display the correct icon.

src/components/Auth/SigninWithPassword.tsx

@@ -1,30 +1,32 @@
 "use client";
 import { PasswordIcon, UserIcon } from "@/assets/icons";
 
-import InputGroup from "../FormElements/InputGroup";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { ILoginCredentials } from "@/lib/api";
 import { useLoginQuery } from "@/hooks/queries";
-import { useRef, useState } from "react";
+import { ILoginCredentials } from "@/lib/api";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import InputGroup from "../FormElements/InputGroup";
 
 import { FormErrorMessages } from "@/constants/Texts";
+import { useIsMutating } from "@tanstack/react-query";
 
 export default function SigninWithPassword() {
+  const isMutating = useIsMutating();
   const [passwordFieldInputType, setPasswordFieldInputType] = useState<
     "password" | "text"
   >("password");
   const { handleSubmit, control, reset, register } =
     useForm<ILoginCredentials>();
-  const { mutate, isPending } = useLoginQuery();
+  const { mutate } = useLoginQuery(reset);
 
   const onSubmit: SubmitHandler<ILoginCredentials> = (data) => {
     mutate(data);
-    reset();
   };
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <InputGroup
         type="username"
+        disabled={!!isMutating}
         {...register("username", {
           required: {
             value: true,
@@ -40,6 +42,7 @@ export default function SigninWithPassword() {
 
       <InputGroup
         type={passwordFieldInputType}
+        disabled={!!isMutating}
         {...register("password", {
           required: {
             value: true,
@@ -67,7 +70,11 @@ export default function SigninWithPassword() {
           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"
         >
-          Sign In
+          {isMutating ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+          ) : (
+            "Sign in"
+          )}
         </button>
       </div>
     </form>