diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx
index aff4f6b..56b8b7f 100644
--- a/src/module/position/ui/drawer_detail_position.tsx
+++ b/src/module/position/ui/drawer_detail_position.tsx
@@ -1,25 +1,24 @@
-import { keyWibu, LayoutDrawer, TEMA, WARNA } from "@/module/_global"
+import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
-import { funGetAllGroup, IDataGroup } from "@/module/group"
-import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
+import { funGetAllGroup } from "@/module/group"
+import { useHookstate } from "@hookstate/core"
+import { Box, Button, Flex, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import toast from "react-hot-toast"
 import { FaPencil, FaToggleOff } from "react-icons/fa6"
+import { useWibuRealtime } from "wibu-realtime"
 import { funEditPosition, funEditStatusPosition, funGetOnePosition } from "../lib/api_position"
 import { IDataPosition } from "../lib/type_position"
-import { useHookstate } from "@hookstate/core"
 import { globalRefreshPosition } from "../lib/val_posisition"
-import { useWibuRealtime } from "wibu-realtime"
 
-export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
-   onUpdated: (val: boolean) => void, id: string, isActive: boolean;
-}) {
+export default function DrawerDetailPosition({ onUpdated, id, isActive }: { onUpdated: (val: boolean) => void, id: string, isActive: boolean; }) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
    const [loading, setLoading] = useState(true)
    const [loadingEdit, setLoadingEdit] = useState(false)
+   const [loadingModal, setLoadingModal] = useState(false)
    const tema = useHookstate(TEMA)
    const [data, setData] = useState<any>({
       id: id,
@@ -128,6 +127,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    async function nonActive(val: boolean) {
       try {
          if (val) {
+            setLoadingModal(true)
             const res = await funEditStatusPosition(id, { isActive: isActive })
             if (res.success) {
                toast.success(res.message);
@@ -142,12 +142,13 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                toast.error(res.message)
             }
          }
-         setModal(false);
       } catch (error) {
          console.error(error);
-         setModal(false);
          toast.error("Edit jabatan gagal, coba lagi nanti");
-         onUpdated(false);
+         onUpdated(false)
+      } finally {
+         setLoadingModal(false)
+         setModal(false)
       }
    }
 
@@ -233,7 +234,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
          </LayoutDrawer>
 
 
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+         <LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi data?"
             onYes={(val) => { nonActive(val) }} />
       </Box>