Updated form toasts

src/components/PageComponents/Channel.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import { fromByteArray, toByteArray } from "base64-js";
 import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Form } from "@components/form/Form";
@@ -23,7 +24,6 @@ export interface SettingsPanelProps {
 
 export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   const { connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const [keySize, setKeySize] = useState<128 | 256>(256);
   const [pskHidden, setPskHidden] = useState(true);
 
@@ -62,27 +62,35 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     });
   }, [channel, reset]);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    const channelData = Protobuf.Channel.create({
+      void toast.promise(
-      role:
+        connection.setChannel(
-        channel?.role === Protobuf.Channel_Role.PRIMARY
+          {
-          ? Protobuf.Channel_Role.PRIMARY
+            role:
-          : data.enabled
+              channel?.role === Protobuf.Channel_Role.PRIMARY
-          ? Protobuf.Channel_Role.SECONDARY
+                ? Protobuf.Channel_Role.PRIMARY
-          : Protobuf.Channel_Role.DISABLED,
+                : data.enabled
-      index: channel?.index,
+                ? Protobuf.Channel_Role.SECONDARY
-      settings: {
+                : Protobuf.Channel_Role.DISABLED,
-        ...data,
+            index: channel?.index,
-        psk: toByteArray(data.psk ?? ""),
+            settings: {
-      },
+              ...data,
-    });
+              psk: toByteArray(data.psk ?? ""),
-
+            },
-    await connection?.setChannel(channelData, (): Promise<void> => {
+          },
-      reset({ ...data });
+          (): Promise<void> => {
-      setLoading(false);
+            reset({ ...data });
-      return Promise.resolve();
+            return Promise.resolve();
-    });
+          }
+        ),
+        {
+          loading: "Saving...",
+          success: "Saved Channel",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   return (
@@ -108,7 +116,6 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
           psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
         })
       }
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Bluetooth = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
 
   const {
     register,
@@ -34,21 +33,27 @@ export const Bluetooth = (): JSX.Element => {
   }, [reset, config.bluetooth]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "bluetooth",
+            payloadVariant: {
-          bluetooth: data,
+              oneofKind: "bluetooth",
-        },
+              bluetooth: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Bluetooth Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Bluetooth Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   const pairingMode = useWatch({
@@ -62,7 +67,6 @@ export const Bluetooth = (): JSX.Element => {
       title="Bluetooth Config"
       breadcrumbs={["Config", "Bluetooth"]}
       reset={() => reset(config.bluetooth)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Device.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Select } from "@app/components/form/Select.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -15,7 +15,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Device = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -32,28 +31,34 @@ export const Device = (): JSX.Element => {
   }, [reset, config.device]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "device",
+            payloadVariant: {
-          device: data,
+              oneofKind: "device",
-        },
+              device: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Device Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Device Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Device Config"
       breadcrumbs={["Config", "Device"]}
       reset={() => reset(config.device)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Display.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Display = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -33,28 +32,34 @@ export const Display = (): JSX.Element => {
   }, [reset, config.display]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "display",
+            payloadVariant: {
-          display: data,
+              oneofKind: "display",
-        },
+              display: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Display Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Display Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Display Config"
       breadcrumbs={["Config", "Display"]}
       reset={() => reset(config.display)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/LoRa.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const LoRa = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
 
   const {
     register,
@@ -40,21 +39,27 @@ export const LoRa = (): JSX.Element => {
   }, [reset, config.lora]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "lora",
+            payloadVariant: {
-          lora: data,
+              oneofKind: "lora",
-        },
+              lora: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved LoRa Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved LoRa Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   return (
@@ -62,7 +67,6 @@ export const LoRa = (): JSX.Element => {
       title="LoRa Config"
       breadcrumbs={["Config", "LoRa"]}
       reset={() => reset(config.lora)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Network.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const Network = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -39,28 +38,34 @@ export const Network = (): JSX.Element => {
   }, [reset, config.network]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "network",
+            payloadVariant: {
-          network: data,
+              oneofKind: "network",
-        },
+              network: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Network Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Network Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Network Config"
       breadcrumbs={["Config", "Network"]}
       reset={() => reset(config.network)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Position.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Position = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -30,21 +29,27 @@ export const Position = (): JSX.Element => {
   }, [reset, config.position]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "position",
+            payloadVariant: {
-          position: data,
+              oneofKind: "position",
-        },
+              position: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Position Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Position Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   return (
@@ -52,7 +57,6 @@ export const Position = (): JSX.Element => {
       title="Position Config"
       breadcrumbs={["Config", "Position"]}
       reset={() => reset(config.position)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/Power.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Power = (): JSX.Element => {
   const { config, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -30,28 +29,34 @@ export const Power = (): JSX.Element => {
   }, [reset, config.power]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setConfig(
+      void toast.promise(
-      {
+        connection.setConfig(
-        payloadVariant: {
+          {
-          oneofKind: "power",
+            payloadVariant: {
-          power: data,
+              oneofKind: "power",
-        },
+              power: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Power Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Power Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Power Config"
       breadcrumbs={["Config", "Power"]}
       reset={() => reset(config.power)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/Config/User.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 import { base16 } from "rfc4648";
 
 import { Input } from "@app/components/form/Input.js";
@@ -17,7 +17,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const User = (): JSX.Element => {
   const { hardware, nodes, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
 
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
@@ -41,15 +40,18 @@ export const User = (): JSX.Element => {
   }, [reset, myNode]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection && myNode?.data.user) {
-
+      void toast.promise(
-    if (myNode?.data.user) {
+        connection.setOwner({ ...myNode.data.user, ...data }, async () => {
-      void connection?.setOwner({ ...myNode.data.user, ...data }, async () => {
+          reset({ ...data });
-        reset({ ...data });
+          await Promise.resolve();
-        setLoading(false);
+        }),
-        toast.success("Saved User Config, Restarting Node");
+        {
-        await Promise.resolve();
+          loading: "Saving...",
-      });
+          success: "Saved User, Restarting Node",
+          error: "No response received",
+        }
+      );
     }
   });
 
@@ -64,7 +66,6 @@ export const User = (): JSX.Element => {
           isLicensed: myNode?.data.user?.isLicensed,
         });
       }}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
@@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const CannedMessage = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -39,28 +38,34 @@ export const CannedMessage = (): JSX.Element => {
   }, [reset, moduleConfig.cannedMessage]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "cannedMessage",
+            payloadVariant: {
-          cannedMessage: data,
+              oneofKind: "cannedMessage",
-        },
+              cannedMessage: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Canned Message Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Canned Message Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Canned Message Config"
       breadcrumbs={["Module Config", "Canned Message"]}
       reset={() => reset(moduleConfig.cannedMessage)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const ExternalNotification = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -28,22 +27,28 @@ export const ExternalNotification = (): JSX.Element => {
     reset(moduleConfig.externalNotification);
   }, [reset, moduleConfig.externalNotification]);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    await connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "externalNotification",
+            payloadVariant: {
-          externalNotification: data,
+              oneofKind: "externalNotification",
-        },
+              externalNotification: data,
-      },
+            },
-      async (): Promise<void> => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved External Notification Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved External Notification Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   const moduleEnabled = useWatch({
@@ -57,7 +62,6 @@ export const ExternalNotification = (): JSX.Element => {
       title="External Notification Config"
       breadcrumbs={["Module Config", "External Notification"]}
       reset={() => reset(moduleConfig.externalNotification)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const MQTT = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -36,28 +35,34 @@ export const MQTT = (): JSX.Element => {
   }, [reset, moduleConfig.mqtt]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "mqtt",
+            payloadVariant: {
-          mqtt: data,
+              oneofKind: "mqtt",
-        },
+              mqtt: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved MQTT Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved MQTT Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="MQTT Config"
       breadcrumbs={["Module Config", "MQTT"]}
       reset={() => reset(moduleConfig.mqtt)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const RangeTest = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -29,22 +28,28 @@ export const RangeTest = (): JSX.Element => {
     reset(moduleConfig.rangeTest);
   }, [reset, moduleConfig.rangeTest]);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    await connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "rangeTest",
+            payloadVariant: {
-          rangeTest: data,
+              oneofKind: "rangeTest",
-        },
+              rangeTest: data,
-      },
+            },
-      async (): Promise<void> => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Range Test Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Range Test Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   const moduleEnabled = useWatch({
@@ -58,7 +63,6 @@ export const RangeTest = (): JSX.Element => {
       title="Range Test Config"
       breadcrumbs={["Module Config", "Range Test"]}
       reset={() => reset(moduleConfig.rangeTest)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -29,22 +28,28 @@ export const Serial = (): JSX.Element => {
     reset(moduleConfig.serial);
   }, [reset, moduleConfig.serial]);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    await connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "serial",
+            payloadVariant: {
-          serial: data,
+              oneofKind: "serial",
-        },
+              serial: data,
-      },
+            },
-      async (): Promise<void> => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Serial Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Serial Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   const moduleEnabled = useWatch({
@@ -58,7 +63,6 @@ export const Serial = (): JSX.Element => {
       title="Serial Config"
       breadcrumbs={["Module Config", "Serial"]}
       reset={() => reset(moduleConfig.serial)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm, useWatch } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const StoreForward = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -29,22 +28,28 @@ export const StoreForward = (): JSX.Element => {
     reset(moduleConfig.storeForward);
   }, [reset, moduleConfig.storeForward]);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    await connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "storeForward",
+            payloadVariant: {
-          storeForward: data,
+              oneofKind: "storeForward",
-        },
+              storeForward: data,
-      },
+            },
-      async (): Promise<void> => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Stora & Forward Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Store & Forward Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
 
   const moduleEnabled = useWatch({
@@ -58,7 +63,6 @@ export const StoreForward = (): JSX.Element => {
       title="Store & Forward Config"
       breadcrumbs={["Module Config", "Store & Forward"]}
       reset={() => reset(moduleConfig.storeForward)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { Controller, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
@@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Telemetry = (): JSX.Element => {
   const { moduleConfig, connection } = useDevice();
-  const [loading, setLoading] = useState(false);
   const {
     register,
     handleSubmit,
@@ -30,28 +29,34 @@ export const Telemetry = (): JSX.Element => {
   }, [reset, moduleConfig.telemetry]);
 
   const onSubmit = handleSubmit((data) => {
-    setLoading(true);
+    if (connection) {
-    void connection?.setModuleConfig(
+      void toast.promise(
-      {
+        connection.setModuleConfig(
-        payloadVariant: {
+          {
-          oneofKind: "telemetry",
+            payloadVariant: {
-          telemetry: data,
+              oneofKind: "telemetry",
-        },
+              telemetry: data,
-      },
+            },
-      async () => {
+          },
-        reset({ ...data });
+          async () => {
-        setLoading(false);
+            reset({ ...data });
-        toast.success("Saved Telemetry Config, Restarting Node");
+            await Promise.resolve();
-        await Promise.resolve();
+          }
-      }
+        ),
-    );
+        {
+          loading: "Saving...",
+          success: "Saved Telemetry Config, Restarting Node",
+          error: "No response received",
+        }
+      );
+    }
   });
+
   return (
     <Form
       title="Telemetry Config"
       breadcrumbs={["Module Config", "Telemetry"]}
       reset={() => reset(moduleConfig.telemetry)}
-      loading={loading}
       dirty={isDirty}
       onSubmit={onSubmit}
     >

src/components/form/Form.tsx

@@ -5,7 +5,6 @@ import { FiSave } from "react-icons/fi";
 
 import { Button } from "@components/Button.js";
 import {
-  ArrowPathIcon,
   ArrowUturnLeftIcon,
   ChevronRightIcon,
   HomeIcon,
@@ -16,7 +15,6 @@ export interface FormProps extends HTMLProps<HTMLFormElement> {
   breadcrumbs: string[];
   reset: () => void;
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
-  loading: boolean;
   dirty: boolean;
 }
 
@@ -24,7 +22,6 @@ export const Form = ({
   title,
   breadcrumbs,
   reset,
-  loading,
   dirty,
   children,
   onSubmit,
@@ -33,11 +30,6 @@ export const Form = ({
   return (
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     <form className="w-full" onSubmit={onSubmit} {...props}>
-      {loading && (
-        <div className="absolute z-10 flex h-full w-full rounded-md bg-slate-600">
-          <ArrowPathIcon className="m-auto h-8 animate-spin" />
-        </div>
-      )}
       <div className="select-none rounded-md bg-gray-700 p-4">
         <ol className="flex gap-4">
           <li className="cursor-pointer text-gray-400 hover:text-gray-200">