add loading when post/put data on master data module

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

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -34,6 +35,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: ''
@@ -69,25 +71,31 @@ const EditDialog = () => {
   const doUpdateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
-      // console.log('Ini datanya:', selectedReward);
-      const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
+      try {
+        const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
 
-      if (response?.status) {
-        resetForm();
-        handleEditDialog(false, null);
-        toast.success('Success Update Reward');
-        reload();
-        const editActivity = {
-          module: 'Manage Reward',
-          description: `Edit Reward => ${formField.name}`,
-          action: 'U'
-        };
+        if (response?.status) {
+          resetForm();
+          handleEditDialog(false, null);
+          toast.success('Success Update Reward');
+          reload();
+          const editActivity = {
+            module: 'Manage Reward',
+            description: `Edit Reward => ${formField.name}`,
+            action: 'U'
+          };
 
-        doSaveLogActivity(editActivity);
-      } else {
-        toast.error('Error Update Reward');
-        setAlert({ show: true, message: 'Failed to Update Reward. Please try again.' });
+          doSaveLogActivity(editActivity);
+        } else {
+          toast.error('Error Update Reward');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedReward, formField]
@@ -261,7 +269,13 @@ const EditDialog = () => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-5">
-                    <Button variant="default">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>