add loading when post/put data on master data module

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

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface SucosProps {
   id: number;
@@ -54,6 +55,7 @@ const EditDialog = () => {
   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);
@@ -63,24 +65,31 @@ const EditDialog = () => {
   const doUpdateAldeias = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
-      const response = await PutData(`${API_URL}/aldeias/update/${selectedAldeias}`, formField);
+      try {
+        const response = await PutData(`${API_URL}/aldeias/update/${selectedAldeias}`, formField);
 
-      if (response?.status) {
-        resetForm();
-        handleEditDialog(false, null);
-        toast.success('Success Update Aldeia');
-        reload();
-        const createActivity = {
-          module: 'Manage Aldeia',
-          description: `Edit Aldeia => ${selectedAldeias}`,
-          action: 'U'
-        };
+        if (response?.status) {
+          resetForm();
+          handleEditDialog(false, null);
+          toast.success('Success Update Aldeia');
+          reload();
+          const createActivity = {
+            module: 'Manage Aldeia',
+            description: `Edit Aldeia => ${selectedAldeias}`,
+            action: 'U'
+          };
 
-        doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Error Update Aldeia');
-        setAlert({ show: true, message: 'Error Update Aldeia' });
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error('Error Update Aldeia');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedAldeias, formField]
@@ -258,7 +267,13 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end">
-                    <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>