added async loading state

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -24,8 +24,8 @@ const BearerTypeFields = () => {
     verbose: verbose === "true",
   };
 
-  const handleSubmit = (values: BearerTypeFieldType) => {
+  const handleSubmit = async (values: BearerTypeFieldType) => {
-    dispatcherMutation.mutate(values);
+    await dispatcherMutation.mutateAsync(values);
   };
 
   return (
@@ -34,6 +34,7 @@ const BearerTypeFields = () => {
       onSubmit={handleSubmit}
       enableReinitialize
     >
+      {({ isSubmitting }) => (
         <Form>
           <div className="flex flex-col space-y-4 px-2">
             <FormGroup>
@@ -61,10 +62,13 @@ const BearerTypeFields = () => {
               type="submit"
               className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
             >
-            Save Changes
+              {isSubmitting || dispatcherMutation.isPending
+                ? "Saving..."
+                : "Save Changes"}
             </button>
           </div>
         </Form>
+      )}
     </Formik>
   );
 };

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -30,8 +30,8 @@ const ChannelFields = () => {
     readTimeoutSeconds: Number(readTimeoutSeconds),
   };
 
-  const handleSubmit = (values: InitialValuesForm) => {
+  const handleSubmit = async (values: InitialValuesForm) => {
-    backOfficeMutation.mutate(values);
+    await backOfficeMutation.mutateAsync(values);
   };
 
   const ValidationToastOnce = () => {
@@ -84,7 +84,7 @@ const ChannelFields = () => {
       enableReinitialize
       validate={validateValues}
     >
-      {({ errors, touched }) => (
+      {({ errors, touched, isSubmitting }) => (
         <Form>
           <div className="flex flex-col space-y-2 px-2">
             <FormGroup>
@@ -172,7 +172,9 @@ const ChannelFields = () => {
             type="submit"
             className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
           >
-            Save Changes
+            {isSubmitting || backOfficeMutation.isPending
+              ? "Saving..."
+              : "Save Changes"}
           </button>
           <ValidationToastOnce />
         </Form>