add skeleton loading on dialog edit

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

@@ -45,6 +45,7 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -115,6 +116,7 @@ const EditDialog = () => {
   };
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
       id
     });
@@ -132,6 +134,7 @@ const EditDialog = () => {
           : []
       }));
     }
+    setIsLoading(false);
   }, []);
 
   const getCurrencyLists = async (sorting: any) => {
@@ -213,91 +216,110 @@ const EditDialog = () => {
               </Alert>
             )}
 
-            <form onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5">
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Wallet Name
-                    </label>
-                    <Input
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                      placeholder="Wallet Name"
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Description
-                    </label>
-                    <Input
-                      type="text"
-                      value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
-                      placeholder="Description"
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">Status</label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">Currency</label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="Empty"
-                        value={selectedCurrency?.name}
-                        readOnly
-                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
-                      />
+            {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>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">Groups</label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="Empty"
-                        value={selectedGroupNames}
-                        readOnly
-                        className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex justify-end gap-5">
-                  <Button variant="default" type="submit">
-                    Update
-                  </Button>
-                </div>
+                <p className="mt-4 text-gray-500">Loading Wallet Details...</p>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={handleSubmit}>
+                <div className="card-body grid gap-5">
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="form-label flex items-center gap-1 max-w-56">
+                        Wallet Name
+                      </label>
+                      <Input
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                        placeholder="Wallet Name"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="form-label flex items-center gap-1 max-w-56">
+                        Description
+                      </label>
+                      <Input
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) =>
+                          setFormField({ ...formField, description: e.target.value })
+                        }
+                        placeholder="Description"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="form-label flex items-center gap-1 max-w-56">Status</label>
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => setFormField({ ...formField, status: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="form-label flex items-center gap-1 max-w-56">
+                        Currency
+                      </label>
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="Empty"
+                          value={selectedCurrency?.name}
+                          readOnly
+                          className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                      <label className="form-label flex items-center gap-1 max-w-56">Groups</label>
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="Empty"
+                          value={selectedGroupNames}
+                          readOnly
+                          className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-5">
+                    <Button variant="default" type="submit">
+                      Update
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>