Updated loading states and error states accross app

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"}