fix: moved the loader into the submit-button

Eyevinn · Apr 8, 2024 · e8c3008 · e8c3008
1 parent 4e22e1c
commit e8c3008
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/components/landing-page/create-production.tsx b/src/components/landing-page/create-production.tsx
@@ -83,9 +83,18 @@ export const CreateProduction = () => {
     }
   }, [createdProductionId, dispatch, reset]);
 
-  if (loading) {
-    return <Loader />;
-  }
+  useEffect(() => {
+    if (createdProductionId) {
+      reset({
+        productionName: "",
+        defaultLine: "",
+        lines: [],
+      });
+      dispatch({
+        type: "PRODUCTION_CREATED",
+      });
+    }
+  }, [createdProductionId, dispatch, reset]);
 
   return (
     <FormContainer>
@@ -149,8 +158,13 @@ export const CreateProduction = () => {
         Add Line
       </ActionButton>
 
-      <ActionButton type="submit" onClick={handleSubmit(onSubmit)}>
+      <ActionButton
+        type="submit"
+        className={loading ? "submit" : ""}
+        onClick={handleSubmit(onSubmit)}
+      >
         Create Production
+        {loading && <Loader />}
       </ActionButton>
       {createdProductionId !== null && (
         <ProductionConfirmation>

diff --git a/src/components/landing-page/form-elements.tsx b/src/components/landing-page/form-elements.tsx
@@ -49,6 +49,11 @@ export const ActionButton = styled.button`
   &:hover {
     cursor: pointer;
   }
+
+  &.submit {
+    position: relative;
+    color: rgba(255, 255, 255, 0);
+  }
 `;
 
 export const StyledWarningMessage = styled.div`