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)
     }
-
   }
 
 
@@ -100,34 +104,34 @@ function ListBanner() {
               isData.map((v, i) => {
                 return (
                   <Box key={i} mb={20}>
-                  <Paper radius={'md'} withBorder onClick={() => {
+                    <Paper radius={'md'} withBorder onClick={() => {
-                    setIdData(v.id);
+                      setIdData(v.id);
-                    setIdDataStorage(v.image);
+                      setIdDataStorage(v.image);
-                    setExtension(v.extension);
+                      setExtension(v.extension);
-                    setOpenDrawer(true)
+                      setOpenDrawer(true)
-                  }
+                    }
-                  }
+                    }
-                    style={{
+                      style={{
-                      width: '100%',
+                        width: '100%',
-                      maxWidth: 550,
+                        maxWidth: 550,
-                      height: 85,
+                        height: 85,
-                      backgroundColor: 'transparent',
+                        backgroundColor: 'transparent',
-                      border: `1px solid ${tema.get().bgTotalKegiatan}`
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`
 
-                    }}>
+                      }}>
-                    <Group mt={"25"}>
+                      <Group mt={"25"}>
-                      <ActionIcon variant='transparent' w={"100"}>
+                        <ActionIcon variant='transparent' w={"100"}>
-                        <Image
+                          <Image
-                          radius={"xs"}
+                            radius={"xs"}
-                          src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
+                            src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
-                          alt=''
+                            alt=''
-                          w={76}
+                            w={76}
-                          h={38.9}
+                            h={38.9}
-                        />
+                          />
-                      </ActionIcon>
+                        </ActionIcon>
-                      <Text c={"dark"} fz={"h4"}>{v.title}</Text>
+                        <Text c={"dark"} fz={"h4"}>{v.title}</Text>
-                    </Group>
+                      </Group>
-                  </Paper>
+                    </Paper>
                   </Box>
                 )
               })
@@ -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)
           }
-          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)
           }
-          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)
           }
-          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 (
@@ -72,12 +75,12 @@ export default function Profile() {
             justify="center"
             gap="xs"
           >
-            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :      
+            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :
-            <Avatar
+              <Avatar
-              size="100"
+                size="100"
-              radius={"100"}
+                radius={"100"}
-              src={img}
+                src={img}
-            />
+              />
             }
             {/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
             {loading ?
@@ -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)} />
     </>