added async loading state

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

@@ -30,8 +30,8 @@ const ChannelFields = () => {
     readTimeoutSeconds: Number(readTimeoutSeconds),
   };
 
-  const handleSubmit = (values: InitialValuesForm) => {
-    backOfficeMutation.mutate(values);
+  const handleSubmit = async (values: InitialValuesForm) => {
+    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>