add loading when post/put data on master data module

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

@@ -25,6 +25,7 @@ import {
   CommandList
 } from '@/components/ui/command';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
 
 interface PostoAdmsProps {
   PostoAdms_id: number;
@@ -40,6 +41,7 @@ const AddDialog = () => {
   const parsedUser = getAuth()?.user;
   const [posto_adms, setPostoadms] = useState<PostoAdmsProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -63,23 +65,31 @@ const AddDialog = () => {
   const doCreateSucos = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const response = await PostData(`${API_URL}/sucos/create`, formField);
+      setIsSubmitting(true);
 
-      if (response?.status) {
-        resetForm();
-        handleAddDialog(false);
-        reload();
-        toast.success('Sucos created successfully!');
-        const createActivity = {
-          module: 'Manage Sucos',
-          description: `Create Sucos => ${formField.name}`,
-          action: 'C'
-        };
+      try {
+        const response = await PostData(`${API_URL}/sucos/create`, formField);
 
-        doSaveLogActivity(createActivity);
-      } else {
-        toast.error('Failed to create Sucos Please try again.');
-        setAlert({ show: true, message: 'Failed to create Sucos Please try again.' });
+        if (response?.status) {
+          resetForm();
+          handleAddDialog(false);
+          reload();
+          toast.success('Sucos created successfully!');
+          const createActivity = {
+            module: 'Manage Sucos',
+            description: `Create Sucos => ${formField.name}`,
+            action: 'C'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error('Failed to create Sucos Please try again.');
+          setAlert({ show: true, message: response?.message });
+        }
+      } catch (error) {
+        toast.error('Something went wrong. Please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField]
@@ -225,7 +235,13 @@ const AddDialog = () => {
                   <Button type="button" variant="outline" onClick={resetForm}>
                     Reset
                   </Button>
-                  <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" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
                 </div>
               </div>
             </form>