add loading when post/put data on master data module

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

@@ -33,6 +33,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -76,6 +77,7 @@ const EditDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const [transactions, setTransactions] = useState<TransactionProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
@@ -85,27 +87,34 @@ const EditDialog = () => {
   const doUpdateProvider = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
-      const response = await PutData(
-        `${API_URL_MASTERDATA}/provider/update/${selectedProvider}`,
-        formField
-      );
+      try {
+        const response = await PutData(
+          `${API_URL_MASTERDATA}/provider/update/${selectedProvider}`,
+          formField
+        );
 
-      if (response?.status) {
-        resetForm();
-        handleEditDialog(false, null);
-        toast.success('Provider updated successfully.');
-        const createActivity = {
-          module: 'Manage Provider',
-          description: `Update Provider => ${selectedProvider}`,
-          action: 'U'
-        };
+        if (response?.status) {
+          resetForm();
+          handleEditDialog(false, null);
+          toast.success('Provider updated successfully.');
+          const createActivity = {
+            module: 'Manage Provider',
+            description: `Update Provider => ${selectedProvider}`,
+            action: 'U'
+          };
 
-        doSaveLogActivity(createActivity);
-        reload();
-      } else {
-        toast.error('Failed to update provider.');
-        setAlert({ show: true, message: 'Failed to update provider.' });
+          doSaveLogActivity(createActivity);
+          reload();
+        } else {
+          toast.error('Failed to update provider.');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedProvider, formField]
@@ -409,7 +418,13 @@ const EditDialog = () => {
                   )}
 
                   <div className="flex justify-end">
-                    <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-3" />
+                      ) : (
+                        'Save Changes'
+                      )}
+                    </Button>
                   </div>
                 </div>
               </form>