chore: enhance loading state for setting page updates (#3533)

web/components/project/form.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
 import { useApplication, useProject, useWorkspace } from "hooks/store";
@@ -29,6 +29,8 @@ const projectService = new ProjectService();
 
 export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   const { project, workspaceSlug, isAdmin } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
   // store hooks
   const {
     eventTracker: { postHogEventTracker },
@@ -45,7 +47,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     setValue,
     setError,
     reset,
-    formState: { errors, isSubmitting },
+    formState: { errors },
   } = useForm<IProject>({
     defaultValues: {
       ...project,
@@ -114,6 +116,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
   const onSubmit = async (formData: IProject) => {
     if (!workspaceSlug) return;
+    setIsLoading(true);
 
     const payload: Partial<IProject> = {
       name: formData.name,
@@ -139,6 +142,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
           else await handleUpdateChange(payload);
         });
     else await handleUpdateChange(payload);
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 300);
   };
 
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
@@ -308,8 +315,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
         <div className="flex items-center justify-between py-2">
           <>
-            <Button variant="primary" type="submit" loading={isSubmitting} disabled={!isAdmin}>
+            <Button variant="primary" type="submit" loading={isLoading} disabled={!isAdmin}>
-              {isSubmitting ? "Updating" : "Update project"}
+              {isLoading ? "Updating..." : "Update project"}
             </Button>
             <span className="text-sm italic text-custom-sidebar-text-400">
               Created on {renderFormattedDate(project?.created_at)}

web/components/workspace/settings/workspace-details.tsx

@@ -32,6 +32,7 @@ const fileService = new FileService();
 
 export const WorkspaceDetails: FC = observer(() => {
   // states
+  const [isLoading, setIsLoading] = useState(false);
   const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
   const [isImageRemoving, setIsImageRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
@@ -51,7 +52,7 @@ export const WorkspaceDetails: FC = observer(() => {
     control,
     reset,
     watch,
-    formState: { errors, isSubmitting },
+    formState: { errors },
   } = useForm<IWorkspace>({
     defaultValues: { ...defaultValues, ...currentWorkspace },
   });
@@ -59,6 +60,8 @@ export const WorkspaceDetails: FC = observer(() => {
   const onSubmit = async (formData: IWorkspace) => {
     if (!currentWorkspace) return;
 
+    setIsLoading(true);
+
     const payload: Partial<IWorkspace> = {
       logo: formData.logo,
       name: formData.name,
@@ -83,6 +86,9 @@ export const WorkspaceDetails: FC = observer(() => {
         });
         console.error(err);
       });
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 300);
   };
 
   const handleRemoveLogo = () => {
@@ -289,8 +295,8 @@ export const WorkspaceDetails: FC = observer(() => {
 
           {isAdmin && (
             <div className="flex items-center justify-between py-2">
-              <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+              <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isLoading}>
-                {isSubmitting ? "Updating..." : "Update Workspace"}
+                {isLoading ? "Updating..." : "Update Workspace"}
               </Button>
             </div>
           )}

web/pages/profile/index.tsx

@@ -39,6 +39,7 @@ const fileService = new FileService();
 
 const ProfileSettingsPage: NextPageWithLayout = observer(() => {
   // states
+  const [isLoading, setIsLoading] = useState(false);
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const [deactivateAccountModal, setDeactivateAccountModal] = useState(false);
@@ -48,7 +49,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
     reset,
     watch,
     control,
-    formState: { errors, isSubmitting },
+    formState: { errors },
   } = useForm<IUser>({ defaultValues });
   // toast alert
   const { setToastAlert } = useToast();
@@ -62,6 +63,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
   }, [myProfile, reset]);
 
   const onSubmit = async (formData: IUser) => {
+    setIsLoading(true);
     const payload: Partial<IUser> = {
       first_name: formData.first_name,
       last_name: formData.last_name,
@@ -87,6 +89,9 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
           message: "There was some error in updating your profile. Please try again.",
         })
       );
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 300);
   };
 
   const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
@@ -388,8 +393,8 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
               </div>
 
               <div className="flex items-center justify-between py-2">
-                <Button variant="primary" type="submit" loading={isSubmitting}>
+                <Button variant="primary" type="submit" loading={isLoading}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
+                  {isLoading ? "Saving..." : "Save changes"}
                 </Button>
               </div>
             </div>