upd:

Deskripsi:
- loading saat mengganti status jabatan

No Issues

src/module/user/member/ui/drawer_detail_member.tsx

@@ -11,9 +11,10 @@ import { useWibuRealtime } from "wibu-realtime";
 import { funEditStatusMember } from "../lib/api_member";
 
 export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
-  const router = useRouter();
+   const router = useRouter()
-  const [isModal, setModal] = useState(false);
+   const [isModal, setModal] = useState(false)
    const tema = useHookstate(TEMA)
+   const [loadingModal, setLoadingModal] = useState(false)
    const [dataRealTime, setDataRealtime] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
@@ -22,6 +23,7 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
    async function nonActive(val: boolean) {
       try {
          if (val) {
+            setLoadingModal(true)
             const res = await funEditStatusMember(id, {
                isActive: status ? true : false,
             });
@@ -37,11 +39,12 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
                onDeleted(false);
             }
          }
-      setModal(false);
       } catch (error) {
          console.error(error);
-      setModal(false);
          toast.error("Terjadi kesalahan");
+      } finally {
+         setModal(false)
+         setLoadingModal(false)
       }
    }
 
@@ -90,6 +93,7 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
             </SimpleGrid>
          </Stack>
          <LayoutModal
+            loading={loadingModal}
             opened={isModal}
             onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"

src/module/user/member/ui/navbar_detail_member.tsx

@@ -1,19 +1,19 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
-import { HiMenu } from "react-icons/hi";
-import DrawerDetailMember from "./drawer_detail_member";
-import { useState } from "react";
-import { RiIdCardFill } from "react-icons/ri";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { IoMaleFemale } from "react-icons/io5";
-import { useShallowEffect } from "@mantine/hooks";
-import { funGetOneMember } from "../lib/api_member";
-import toast from "react-hot-toast";
-import { IListMember, IMember } from "../lib/type_member";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Center, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { HiMenu } from "react-icons/hi";
+import { IoMaleFemale } from "react-icons/io5";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
 import { valueRoleUser } from "../../lib/val_user";
+import { funGetOneMember } from "../lib/api_member";
+import { IListMember, IMember } from "../lib/type_member";
+import DrawerDetailMember from "./drawer_detail_member";
 
 
 export default function NavbarDetailMember({ id }: IMember) {