Updated loading states and error states accross app

src/components/SettingForms/System/SettingSaveRecall.tsx

@@ -1,3 +1,4 @@
+import { toast } from "sonner";
 import type { SystemValues } from "../../../types/types";
 import { CAM_BASE } from "../../../utils/config";
 
@@ -35,7 +36,13 @@ export async function handleSystemSave(values: SystemValues) {
       );
     }
   } catch (err) {
-    console.error(err);
+    if (err instanceof Error) {
+      toast.error(`Failed to save system settings: ${err.message}`);
+      console.error(err);
+    } else {
+      toast.error("An unexpected error occurred while saving.");
+      console.error("Unknown error:", err);
+    }
   }
 }
 
@@ -79,7 +86,12 @@ export async function handleSystemRecall() {
 
     return { deviceName, sntpServer, sntpInterval, timeZone };
   } catch (err) {
-    console.error(err);
+    if (err instanceof Error) {
+      toast.error(`Error: ${err.message}`);
+    } else {
+      toast.error("An unexpected error occurred");
+    }
+
     return null;
   } finally {
     clearTimeout(timeoutId);

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -7,7 +7,8 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
 
 const SystemConfigFields = () => {
-  const { saveSystemSettings, systemSettingsData } = useSystemConfig();
+  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } =
+    useSystemConfig();
   const initialvalues: SystemValues = {
     deviceName: systemSettingsData?.deviceName ?? "",
     timeZone: systemSettingsData?.timeZone ?? "",
@@ -37,7 +38,7 @@ const SystemConfigFields = () => {
       validateOnChange
       validateOnBlur
     >
-      {({ values, errors, touched }) => (
+      {({ values, errors, touched, isSubmitting }) => (
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label
@@ -131,8 +132,9 @@ const SystemConfigFields = () => {
           <button
             type="submit"
             className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            disabled={isSubmitting}
           >
-            Save System Settings
+            {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
           </button>
           <SystemFileUpload
             name={"softwareUpdate"}