fix(frontend): button click feedback on form update (#1692)

* fix(formUpdateTab): loading state add on form update * fix(formUpdateTab): solve ts type error
hotosm · Jul 23, 2024 · b8c9c83 · b8c9c83
1 parent 41fa323
commit b8c9c83
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
@@ -31,6 +31,7 @@ const FormUpdateTab = ({ projectId }) => {
   const sortedFormCategoryList = formCategoryList.slice().sort((a, b) => a.title.localeCompare(b.title));
   const customFileValidity = useAppSelector((state) => state.createproject.customFileValidity);
   const validateCustomFormLoading = useAppSelector((state) => state.createproject.validateCustomFormLoading);
+  const formUpdateLoading = useAppSelector((state) => state.createproject.formUpdateLoading);
 
   useEffect(() => {
     dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`));
@@ -91,7 +92,7 @@ const FormUpdateTab = ({ projectId }) => {
           label="title"
           value={selectedCategory}
           onValueChange={(value) => {
-            setSelectedCategory(value);
+            if (value) setSelectedCategory(value?.toString());
           }}
           className="fmtm-max-w-[13.5rem]"
         />
@@ -130,7 +131,14 @@ const FormUpdateTab = ({ projectId }) => {
         {error.formError && <p className="fmtm-text-primaryRed fmtm-text-base">{error.formError}</p>}
       </div>
       <div className="fmtm-flex fmtm-justify-center">
-        <Button onClick={onSave} btnText="UPDATE" btnType="primary" className="fmtm-rounded-md" />
+        <Button
+          isLoading={formUpdateLoading}
+          loadingText="UPDATE"
+          onClick={onSave}
+          btnText="UPDATE"
+          btnType="primary"
+          className="fmtm-rounded-md"
+        />
       </div>
     </div>
   );