Feat/add form with loader

src/components/landing-page/form-elements.tsx

@@ -13,6 +13,24 @@ export const FormInput = styled.input`
   &.additional-line {
     padding-right: 3.5rem;
   }
+
+  &.with-loader {
+    padding-right: 3.5rem;
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
 `;
 
 export const FormSelect = styled.select`
@@ -49,10 +67,6 @@ export const StyledWarningMessage = styled.div`
   border: 1px solid #ebca6a;
   display: flex;
   align-items: center;
-
-  &.with-loader {
-    min-width: 27rem;
-  }
 `;
 
 const ActionButton = styled.button`

src/components/landing-page/form-input-with-loader.tsx

@@ -0,0 +1,49 @@
+import { ChangeHandler, RefCallBack } from "react-hook-form";
+import styled from "@emotion/styled";
+import { Spinner } from "../loader/loader";
+import { FormLabel, DecorativeLabel, FormInput } from "./form-elements";
+
+type TFormInputWithLoader = {
+  label: string;
+  placeholder: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  name: string;
+  ref: RefCallBack;
+  onBlur: ChangeHandler;
+  type: string;
+  loading: boolean;
+};
+
+const InputWrapper = styled.div`
+  position: relative;
+`;
+
+export const FormInputWithLoader = ({
+  label,
+  placeholder,
+  onChange,
+  name,
+  ref,
+  onBlur,
+  type,
+  loading,
+}: TFormInputWithLoader) => {
+  return (
+    <FormLabel>
+      <DecorativeLabel>{label}</DecorativeLabel>
+      <InputWrapper>
+        <FormInput
+          className="with-loader"
+          onChange={onChange}
+          name={name}
+          ref={ref}
+          onBlur={onBlur}
+          type={type}
+          placeholder={placeholder}
+          autoComplete="off"
+        />
+        {loading && <Spinner className="form-loader" />}
+      </InputWrapper>
+    </FormLabel>
+  );
+};

src/components/landing-page/join-production.tsx

@@ -17,7 +17,7 @@ import { useFetchProduction } from "./use-fetch-production.ts";
 import { darkText, errorColour } from "../../css-helpers/defaults.ts";
 import { TJoinProductionOptions } from "../production-line/types.ts";
 import { uniqBy } from "../../helpers.ts";
-import { LoaderDots } from "../loader/loader.tsx";
+import { FormInputWithLoader } from "./form-input-with-loader.tsx";
 
 type FormValues = TJoinProductionOptions;
 
@@ -134,23 +134,22 @@ export const JoinProduction = ({ preSelected }: TProps) => {
         <>
           {!preSelected && (
             <>
-              <FormLabel>
-                <DecorativeLabel>Production ID</DecorativeLabel>
-                <FormInput
-                  onChange={(ev) => {
-                    onChange(ev);
+              <FormInputWithLoader
+                onChange={(ev) => {
+                  onChange(ev);
 
-                    const pid = parseInt(ev.target.value, 10);
+                  const pid = parseInt(ev.target.value, 10);
 
-                    setJoinProductionId(Number.isNaN(pid) ? null : pid);
-                  }}
-                  name={name}
-                  ref={ref}
-                  onBlur={onBlur}
-                  type="number"
-                  placeholder="Production ID"
-                />
-              </FormLabel>
+                  setJoinProductionId(Number.isNaN(pid) ? null : pid);
+                }}
+                label="Production ID"
+                placeholder="Production ID"
+                name={name}
+                ref={ref}
+                onBlur={onBlur}
+                type="number"
+                loading={loading}
+              />
               {productionFetchError && (
                 <FetchErrorMessage>
                   The production ID could not be fetched.{" "}
@@ -238,9 +237,8 @@ export const JoinProduction = ({ preSelected }: TProps) => {
                   ))}
               </FormSelect>
               {!production && (
-                <StyledWarningMessage className="with-loader">
+                <StyledWarningMessage>
                   Please enter a production id
-                  {loading && <LoaderDots className="in-active" text="" />}
                 </StyledWarningMessage>
               )}
             </FormLabel>

src/components/loader/loader.tsx

@@ -27,6 +27,16 @@ const Loading = styled.div`
     border-top: 0.4rem solid #e2e2e2;
   }
 
+  &.form-loader {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    width: 1.8rem;
+    height: 1.8rem;
+    border: 0.4rem solid rgba(0, 0, 0, 0.2);
+    border-top: 0.4rem solid #595959;
+  }
+
   @keyframes spin {
     0% {
       transform: rotate(0deg);
@@ -68,6 +78,7 @@ const Text = styled.span`
 
 const Dots = styled.span`
   padding-left: 0.2rem;
+  width: 2rem;
   font-size: 2rem;
   transform: translateY(-50%);
   &.active {

src/components/manage-productions/manage-productions.tsx

@@ -1,20 +1,19 @@
 import { ErrorMessage } from "@hookform/error-message";
-import { SubmitHandler, useForm, useWatch } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { DisplayContainerHeader } from "../landing-page/display-container-header";
 import {
   PrimaryButton,
   DecorativeLabel,
-  FormInput,
-  FormLabel,
   StyledWarningMessage,
 } from "../landing-page/form-elements";
-import { LoaderDots, Spinner } from "../loader/loader";
+import { Spinner } from "../loader/loader";
 import { useFetchProduction } from "../landing-page/use-fetch-production";
 import { darkText, errorColour } from "../../css-helpers/defaults";
 import { useDeleteProduction } from "./use-delete-production";
 import { NavigateToRootButton } from "../navigate-to-root-button/navigate-to-root-button";
+import { FormInputWithLoader } from "../landing-page/form-input-with-loader";
 
 type FormValue = {
   productionId: string;
@@ -67,15 +66,13 @@ export const ManageProductions = () => {
   const [verifyRemove, setVerifyRemove] = useState<boolean>(false);
   const [removeId, setRemoveId] = useState<null | number>(null);
   const {
-    control,
     reset,
     formState,
     formState: { errors, isSubmitSuccessful },
     register,
     handleSubmit,
   } = useForm<FormValue>();
-
-  const productionId = useWatch({ name: "productionId", control });
+  const [productionId, setProductionId] = useState<null | number>(null);
 
   const { onChange, onBlur, name, ref } = register("productionId", {
     required: "Production ID is required",
@@ -86,7 +83,7 @@ export const ManageProductions = () => {
     error: productionFetchError,
     production,
     loading: fetchLoader,
-  } = useFetchProduction(parseInt(productionId, 10));
+  } = useFetchProduction(productionId);
 
   const {
     loading: deleteLoader,
@@ -122,21 +119,22 @@ export const ManageProductions = () => {
         <NavigateToRootButton />
       </StyledBackBtnIcon>
       <DisplayContainerHeader>Remove Production</DisplayContainerHeader>
-      <FormLabel>
-        <DecorativeLabel>Production ID</DecorativeLabel>
-        <FormInput
-          onChange={(ev) => {
-            setShowDeleteDoneMessage(false);
-            onChange(ev);
-          }}
-          name={name}
-          ref={ref}
-          onBlur={onBlur}
-          type="number"
-          autoComplete="off"
-          placeholder="Production ID"
-        />
-      </FormLabel>
+      <FormInputWithLoader
+        onChange={(ev) => {
+          onChange(ev);
+          const pid = parseInt(ev.target.value, 10);
+
+          setProductionId(Number.isNaN(pid) ? null : pid);
+          setShowDeleteDoneMessage(false);
+        }}
+        label="Production ID"
+        placeholder="Production ID"
+        name={name}
+        ref={ref}
+        onBlur={onBlur}
+        type="number"
+        loading={fetchLoader}
+      />
       {productionFetchError && (
         <FetchErrorMessage>
           The production ID could not be fetched. {productionFetchError.name}{" "}
@@ -200,9 +198,8 @@ export const ManageProductions = () => {
           )}
         </>
       ) : (
-        <StyledWarningMessage className="with-loader">
+        <StyledWarningMessage>
           Please enter a production id
-          {fetchLoader && <LoaderDots className="in-active" text="" />}
         </StyledWarningMessage>
       )}
       {showDeleteDoneMessage && (