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.
This commit is contained in:
@@ -28,6 +28,7 @@ type TagInputProps<T extends FieldValues> = {
|
||||
watch?: UseFormWatch<T>;
|
||||
errors?: FieldErrors<T>;
|
||||
maxTags?: number;
|
||||
shouldAddWithSpace?: boolean;
|
||||
allowDuplicates?: boolean;
|
||||
tagValidator?: (tag: string) => boolean;
|
||||
} & Partial<UseFormRegisterReturn>;
|
||||
@@ -43,6 +44,7 @@ const TagInput = <T extends FieldValues>({
|
||||
name,
|
||||
register,
|
||||
setValue,
|
||||
shouldAddWithSpace = false,
|
||||
watch,
|
||||
errors,
|
||||
maxTags,
|
||||
@@ -87,7 +89,11 @@ const TagInput = <T extends FieldValues>({
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" || e.key === ",") {
|
||||
if (
|
||||
e.key === "Enter" ||
|
||||
e.key === "," ||
|
||||
(shouldAddWithSpace && e.key === " ")
|
||||
) {
|
||||
e.preventDefault();
|
||||
addTag(inputValue);
|
||||
} else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
|
||||
@@ -167,7 +173,7 @@ const TagInput = <T extends FieldValues>({
|
||||
<input
|
||||
type="hidden"
|
||||
{...(register ? register(name) : {})}
|
||||
value={tags.length > 0 ? JSON.stringify(tags) : ''}
|
||||
value={tags.length > 0 ? JSON.stringify(tags) : ""}
|
||||
ref={ref}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user