add loading when post/put data on master data module

src/pages/master/municipios/blocks/AddDialog.tsx

@@ -17,6 +17,7 @@ import { toast } from 'sonner';
 import { getAuth, useAuthContext } from '@/auth';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -39,6 +40,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -48,23 +50,31 @@ const AddDialog = () => {
   const doCreateMunicipio = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const response = await PostData(`${API_URL}/municipios/create`, formField);
+      setIsSubmitting(true);
 
-      if (response?.status) {
-        handleAddDialog(false);
-        resetForm();
-        reload();
-        toast.success('Municipio created successfully!');
-        const createActivity = {
-          module: 'Manage Municipio',
-          description: `Create Municipio => ${formField.name}`,
-          action: 'C'
-        };
+      try {
+        const response = await PostData(`${API_URL}/municipios/create`, formField);
 
-        doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Failed to create municipio.');
-        setAlert({ show: true, message: 'Failed to create municipio. Please try again.' });
+        if (response?.status) {
+          handleAddDialog(false);
+          resetForm();
+          reload();
+          toast.success('Municipio created successfully!');
+          const createActivity = {
+            module: 'Manage Municipio',
+            description: `Create Municipio => ${formField.name}`,
+            action: 'C'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error('Failed to create municipio.');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -140,8 +150,12 @@ const AddDialog = () => {
                   <Button variant={'outline'} type="reset" onClick={handleReset}>
                     Reset
                   </Button>
-                  <Button variant={'default'} type="submit">
-                    Create
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
                   </Button>
                 </div>
               </div>

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -17,6 +17,7 @@ import { Button } from '@/components/ui/button';
 import { getAuth, useAuthContext } from '@/auth';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -27,6 +28,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -50,26 +52,34 @@ const EditDialog = () => {
   const doUpdateMunicipios = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const response = await PutData(
-        `${API_URL}/municipios/update/${selectedMunicipios}`,
-        formField
-      );
+      setIsSubmitting(true);
 
-      if (response?.status) {
-        handleEditDialog(false, null);
-        resetForm();
-        toast.success('Success update municipio');
-        reload();
-        const createActivity = {
-          module: 'Manage Municipios',
-          description: `Edit Municipio => ${selectedMunicipios}`,
-          action: 'U'
-        };
+      try {
+        const response = await PutData(
+          `${API_URL}/municipios/update/${selectedMunicipios}`,
+          formField
+        );
 
-        doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Failed update user');
-        setAlert({ show: true, message: 'Failed to update municipio. Please try again.' });
+        if (response?.status) {
+          handleEditDialog(false, null);
+          resetForm();
+          toast.success('Success update municipio');
+          reload();
+          const createActivity = {
+            module: 'Manage Municipios',
+            description: `Edit Municipio => ${selectedMunicipios}`,
+            action: 'U'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error('Failed update user');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedMunicipios, formField]
@@ -177,7 +187,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end pt-2.5">
-                    <Button className="btn btn-primary">Save Changes</Button>
+                    <Button variant="default" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>