more enhancements to loading and error feedback

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -19,7 +19,7 @@ const WiFiSettingsForm = () => {
     encryption: "WPA2",
   };
 
-  const handleSubmit = (values: WifiSettingValues) => {
+  const handleSubmit = async (values: WifiSettingValues) => {
     const wifiConfig = {
       id: "ModemAndWifiManager-wifi",
       fields: [
@@ -34,7 +34,7 @@ const WiFiSettingsForm = () => {
       ],
     };
 
-    wifiMutation.mutate(wifiConfig);
+    await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
     <Formik
@@ -42,7 +42,7 @@ const WiFiSettingsForm = () => {
       onSubmit={handleSubmit}
       enableReinitialize
     >
-      {() => (
+      {({ isSubmitting }) => (
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label
@@ -103,7 +103,9 @@ const WiFiSettingsForm = () => {
             type="submit"
             className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
           >
-            Save WiFi settings
+            {isSubmitting || wifiMutation.isPending
+              ? "Saving..."
+              : " Save WiFi settings"}
           </button>
         </Form>
       )}