upd: loading

Dekripsi:
- update loading pada banner
- update loading pada tema
- update loading pada logout

No Issues

src/app/(application)/banner/page.tsx

@@ -1,4 +1,3 @@
-
 import { ListBanner, NavbarBanner } from "@/module/banner";
 import { Box } from "@mantine/core";
 
@@ -7,7 +6,6 @@ export default function Page() {
       <Box>
          <NavbarBanner />
          <ListBanner />
-    
       </Box>
    );
 }

src/module/banner/ui/list_banner.tsx

@@ -5,7 +5,7 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
@@ -25,6 +25,7 @@ function ListBanner() {
   const [isData, setData] = useState<IDataBanner[]>([])
   const [idData, setIdData] = useState('')
   const [isPage, setPage] = useState(1)
+  const [loadingModal, setLoadingModal] = useState(false)
 
   const fetchData = async (loading: boolean) => {
     try {
@@ -57,6 +58,7 @@ function ListBanner() {
 
   async function onDelete(id: string) {
     try {
+      setLoadingModal(true)
       const res = await funDeleteBanner(id);
       if (res.success) {
         toast.success(res.message)
@@ -70,8 +72,10 @@ function ListBanner() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal menghapus banner, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
-
   }
 
 
@@ -178,14 +182,16 @@ function ListBanner() {
       </LayoutDrawer>
 
       <LayoutModal
+        loading={loadingModal}
         opened={isOpenModal}
         onClose={() => setOpenModal(false)}
         description='Apakah Anda yakin ingin menghapus banner?'
         onYes={(val) => {
           if (val) {
             onDelete(idData)
-          }
+          } else {
             setOpenModal(false)
+          }
         }} />
 
       <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -3,11 +3,11 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { IoColorPalette } from 'react-icons/io5';
-import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
+import { funChangeTheme, funDeleteTheme } from '../lib/api_theme';
 import { globalRefreshTheme } from '../lib/val_theme';
 
 export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
@@ -16,9 +16,12 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
   const [isModalDel, setModalDel] = useState(false)
   const tema = useHookstate(TEMA)
   const refresh = useHookstate(globalRefreshTheme)
+  const [loadingApply, setLoadingApply] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)
 
   async function onChangeTheme() {
     try {
+      setLoadingApply(true)
       const res = await funChangeTheme(id)
       if (res.success) {
         tema.set(res.data)
@@ -29,11 +32,15 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
     } catch (error) {
       console.error(error)
       toast.error("Gagal mengubah tema, coba lagi nanti");
+    } finally {
+      setLoadingApply(false)
+      setModal(false)
     }
   }
 
   async function onDelete() {
     try {
+      setLoadingDelete(true)
       const res = await funDeleteTheme(id)
       if (res.success) {
         toast.success(res.message);
@@ -44,6 +51,9 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
     } catch (error) {
       console.error(error)
       toast.error("Gagal menghapus tema, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setModalDel(false)
     }
   }
 
@@ -86,23 +96,25 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
         }
       </SimpleGrid>
 
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal loading={loadingApply} opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
         onYes={(val) => {
           if (val) {
             onChangeTheme()
-          }
+          }else{
             setModal(false)
+          }
         }} />
 
 
-      <LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
+      <LayoutModal loading={loadingDelete} opened={isModalDel} onClose={() => setModalDel(false)}
         description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
         onYes={(val) => {
           if (val) {
             onDelete()
-          }
+          }else{
             setModalDel(false)
+          }
         }} />
     </Box>
   );

src/module/user/profile/ui/profile.tsx

@@ -1,19 +1,19 @@
 "use client"
-import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
+import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
-import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
-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 toast from "react-hot-toast";
-import { LuLogOut } from "react-icons/lu";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { useState } from "react";
-import { funGetProfileByCookies } from "../lib/api_profile";
-import { useShallowEffect } from "@mantine/hooks";
-import { IProfileById } from "../lib/type_profile";
-import { useRouter } from "next/navigation";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { IoMaleFemale } from "react-icons/io5";
+import { LuLogOut } from "react-icons/lu";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
+import { funGetProfileByCookies } from "../lib/api_profile";
+import { IProfileById } from "../lib/type_profile";
 
 export default function Profile() {
   const [openModal, setOpenModal] = useState(false);
@@ -22,6 +22,7 @@ export default function Profile() {
   const [loading, setLoading] = useState(true)
   const [img, setIMG] = useState<any | null>()
   const tema = useHookstate(TEMA)
+  const [loadingModal, setLoadingModal] = useState(false)
 
   async function getData() {
     try {
@@ -44,17 +45,19 @@ export default function Profile() {
   async function onLogout(val: boolean) {
     try {
       if (val) {
+        setLoadingModal(true)
         await fetch('/api/auth/logout', {
           method: 'DELETE',
         });
         toast.success('Logout Sukses')
         window.location.href = '/';
       }
-
-      setOpenModal(false)
-
     } catch (error) {
       console.error(error);
+      toast.error("Logout gagal, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
   }
   return (
@@ -150,7 +153,7 @@ export default function Profile() {
           </Stack>
         }
       </Box>
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
         description="Apakah Anda yakin ingin keluar?"
         onYes={(val) => onLogout(val)} />
     </>