add skeleton loading on dialog edit

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

@@ -40,6 +40,7 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [sucos, setSucos] = useState<SucosProps[]>([]);
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -105,6 +106,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -120,6 +122,7 @@ const EditDialog = () => {
         sucosId: 0
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -176,6 +179,20 @@ const EditDialog = () => {
               </Alert>
             )}
 
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
+                </div>
+                <p className="mt-4 text-gray-500">Loading Aldeia Details...</p>
+              </div>
+            ) : (
               <form onSubmit={handleUpdate}>
                 <div className="card-body grid gap-5">
                   <div className="w-full">
@@ -204,8 +221,8 @@ const EditDialog = () => {
                             className="input col-span-5 text-left"
                             style={{ color: 'inherit' }}
                           >
-                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
+                            {sucos.find((suco) => suco.sucos_id === formField.sucosId)
-                            'Select Sucos'}
+                              ?.sucos_name || 'Select Sucos'}
                           </button>
                         </PopoverTrigger>
                         <PopoverContent className="w-[400px] p-0">
@@ -242,6 +259,7 @@ const EditDialog = () => {
                   </div>
                 </div>
               </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -26,6 +26,7 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -75,6 +76,7 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -88,6 +90,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -141,6 +144,20 @@ const EditDialog = () => {
               </Alert>
             )}
 
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
+                </div>
+                <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
+              </div>
+            ) : (
               <form onSubmit={handleUpdate}>
                 <div className="card-body grid gap-5">
                   <div className="w-full">
@@ -162,6 +179,7 @@ const EditDialog = () => {
                   </div>
                 </div>
               </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -41,6 +41,7 @@ const EditDialog = () => {
   const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
 
   const [alert, setAlert] = useState({
@@ -112,6 +113,7 @@ const EditDialog = () => {
   }, []);
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
 
     if (response?.status) {
@@ -126,6 +128,7 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -184,6 +187,20 @@ const EditDialog = () => {
               </Alert>
             )}
 
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
+                </div>
+                <p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
+              </div>
+            ) : (
               <form onSubmit={handleUpdate}>
                 <div className="card-body grid gap-5">
                   <div className="w-full">
@@ -249,6 +266,7 @@ const EditDialog = () => {
                   </div>
                 </div>
               </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

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

@@ -47,6 +47,7 @@ const EditDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -146,6 +147,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
     // console.log(response);
     if (response?.status) {
@@ -159,6 +161,7 @@ const EditDialog = () => {
         agent: response?.data.agent?.id || null
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -206,7 +209,7 @@ const EditDialog = () => {
     getCustomerList([{ id: 'id', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);
-  // console.log(selectedProvider);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -222,6 +225,20 @@ const EditDialog = () => {
               </Alert>
             )}
 
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
+                </div>
+                <p className="mt-4 text-gray-500">Loading Provider Details...</p>
+              </div>
+            ) : (
               <form onSubmit={handleUpdate}>
                 <div className="card-body grid gap-5">
                   <div className="w-full">
@@ -249,7 +266,9 @@ const EditDialog = () => {
                         className="input"
                         type="text"
                         value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
+                        onChange={(e) =>
+                          setFormField({ ...formField, description: e.target.value })
+                        }
                       />
                     </div>
                   </div>
@@ -376,7 +395,12 @@ const EditDialog = () => {
                         <label className="form-label flex items-center gap-1 max-w-56">
                           Agent Name
                         </label>
-                      <Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
+                        <Input
+                          type="text"
+                          placeholder="Type Agent Only"
+                          readOnly
+                          className="cursor-not-allowed"
+                        />
                       </div>
                     </div>
                   )}
@@ -386,6 +410,7 @@ const EditDialog = () => {
                   </div>
                 </div>
               </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>