add skeleton loading on dialog edit

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

@@ -33,6 +33,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: ''
@@ -93,6 +94,7 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
     // console.log('Ini datanya:', id);
     const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
     // console.log('API Response:', response);
@@ -106,6 +108,7 @@ const EditDialog = () => {
         status: response.data.status
       }));
     }
+    setIsLoading(false);
   }, []);
 
   // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@@ -159,95 +162,112 @@ const EditDialog = () => {
           <div className="flex flex-col">
             {alert.show && <Alert variant="danger">{alert.message}</Alert>}
 
-            <form onSubmit={doUpdateReward}>
-              <div className="card-body grid gap-5">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Name<span className="text-red-500">*</span>
-                  </label>
-
-                  <Input
-                    className="input col-span-6"
-                    type="text"
-                    value={formField.name}
-                    onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
-                  />
-                </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Type<span className="text-red-500">*</span>
-                  </label>
-
-                  <div className="col-span-6">
-                    <Select
-                      value={formField.type}
-                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Select Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {Object.entries(RewardType).map(
-                          ([label, value]: [string, RewardTypeValue]) => (
-                            <SelectItem key={value} value={value}>
-                              {label}
-                            </SelectItem>
-                          )
-                        )}
-                      </SelectContent>
-                    </Select>
+            {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="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Amount<span className="text-red-500">*</span>
-                  </label>
-
-                  <NumericFormat
-                    className="input col-span-6"
-                    value={formField.amount}
-                    thousandSeparator="."
-                    decimalSeparator=","
-                    allowNegative={false}
-                    onValueChange={(values) => {
-                      setFormField((prev) => ({
-                        ...prev,
-                        amount: values.floatValue || 0
-                      }));
-                    }}
-                    placeholder="Enter Amount"
-                  />
-                </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
-                    Status<span className="text-red-500">*</span>
-                  </label>
-
-                  <div className="col-span-6">
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) =>
-                        setFormField((prev) => ({ ...prev, status: value }))
-                      }
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Select" defaultValue={formField.status} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">InActive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
-                  <Button variant="default">Save Changes</Button>
-                </div>
+                <p className="mt-4 text-gray-500">Loading Reward Details...</p>
               </div>
-            </form>
+            ) : (
+              <form onSubmit={doUpdateReward}>
+                <div className="card-body grid gap-5">
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Name<span className="text-red-500">*</span>
+                    </label>
+
+                    <Input
+                      className="input col-span-6"
+                      type="text"
+                      value={formField.name}
+                      onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                    />
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.type}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, type: value }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(RewardType).map(
+                            ([label, value]: [string, RewardTypeValue]) => (
+                              <SelectItem key={value} value={value}>
+                                {label}
+                              </SelectItem>
+                            )
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Amount<span className="text-red-500">*</span>
+                    </label>
+
+                    <NumericFormat
+                      className="input col-span-6"
+                      value={formField.amount}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          amount: values.floatValue || 0
+                        }));
+                      }}
+                      placeholder="Enter Amount"
+                    />
+                  </div>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status: value }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select" defaultValue={formField.status} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">InActive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-5">
+                    <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button>
+                    <Button variant="default">Save Changes</Button>
+                  </div>
+                </div>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>