style : update skeleton

Deskripsi:
- update announcement
- update celender
- update division
- update task
- update project
- update user

No Issue

src/module/announcement/ui/edit_announcement.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Flex, List, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Flex, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -17,6 +17,7 @@ export default function EditAnnouncement() {
    const [isOpen, setOpen] = useState(false)
    const [isChooseDivisi, setChooseDivisi] = useState(false)
    const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
       desc: false
@@ -30,6 +31,7 @@ export default function EditAnnouncement() {
 
    async function fetchOneAnnouncement() {
       try {
+         setLoading(true)
          memberGroup.set([])
          const res = await funGetAnnouncementById(param.id)
          if (res.success) {
@@ -62,9 +64,13 @@ export default function EditAnnouncement() {
             toast.error(res.message)
          }
 
+         setLoading(false)
+
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -110,6 +116,15 @@ export default function EditAnnouncement() {
             pt={30}
             px={20}
          >
+            {loading ?
+
+               <>
+                  <Skeleton height={40} mt={20} radius={30} />
+                  <Skeleton height={75} mt={20} radius={10} />
+                  <Skeleton height={40} mt={10} radius={30} />
+               </>
+               :
+               <>
                   <TextInput
                      size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                      styles={{
@@ -133,7 +148,7 @@ export default function EditAnnouncement() {
                   />
                   <Textarea
                      size="md"
-               radius={20}
+                     radius={10}
                      w={"100%"}
                      label="Pengumuman"
                      withAsterisk
@@ -158,13 +173,26 @@ export default function EditAnnouncement() {
                      }
 
                   />
-
                   <Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
                      Pilih Divisi
                   </Button>
+               </>
+            }
+
          </Stack>
          <Box mb={60} p={20}>
-            {
+            {loading ?
+               Array(3)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i} mb={20}>
+                        <Skeleton height={20} radius={10} mt={20} width={"30%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
+                     </Box>
+                  ))
+
+               :
                memberGroup.get().map((v: any, i: any) => {
                   return (
                      <Box key={i} mt={10}>
@@ -190,6 +218,9 @@ export default function EditAnnouncement() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={40} radius={30} />
+               :
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -209,6 +240,7 @@ export default function EditAnnouncement() {
                >
                   Simpan
                </Button>
+            }
          </Box>
          <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin mengubah data?"

src/module/announcement/ui/edit_choose_member.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
+import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { FaCheck } from 'react-icons/fa';
@@ -22,6 +22,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    const [selectAll, setSelectAll] = useState(false);
    const [isData, setIsData] = useState<GroupData[]>([])
    const memberGroup = useHookstate(globalMemberEditAnnouncement)
+   const [loading, setLoading] = useState(true)
 
    const handleCheck = (groupId: string, divisionId: string) => {
       const newChecked = { ...checked };
@@ -70,6 +71,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    };
 
    async function getData() {
+      setLoading(true)
       const response = await funGetGroupDivision()
       setIsData(response.data)
 
@@ -81,6 +83,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
 
          setChecked(formatArray)
       }
+      setLoading(false)
    }
 
    const handleSubmit = () => {
@@ -107,7 +110,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    return (
       <div>
          <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
-         <Box p={20}>
+         <Box p={20} pb={100}>
             <Group justify='flex-end' mb={20}>
                <Text
                   onClick={handleSelectAll}
@@ -121,7 +124,18 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                   Pilih Semua
                </Text>
             </Group>
-            {isData.map((item) => (
+            {loading ?
+               Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i} mb={20}>
+                        <Skeleton height={20} radius={10} mt={20} width={"30%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
+                     </Box>
+                  ))
+               :
+               isData.map((item) => (
                   <Stack mb={30} key={item.id}>
                      <Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
                         <Text
@@ -172,9 +186,19 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
 
                      ))}
                   </Stack>
-            ))}
+               ))
+            }
 
-            <Box mt="xl">
+
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   color="white"
                   bg={WARNA.biruTua}
@@ -188,8 +212,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                >
                   Simpan
                </Button>
-            </Box>
+            }
-
          </Box>
       </div>
    );

src/module/calender/ui/update_division_calender.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -23,6 +23,7 @@ export default function UpdateDivisionCalender() {
   const memberValue = memberUser.get() as IFormMemberCalender[]
   const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
   const [openMember, setOpenMember] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -34,11 +35,14 @@ export default function UpdateDivisionCalender() {
 
   const fetchGetOne = async () => {
     try {
+      setLoading(true)
       const response = await funGetOneCalender(param.detail)
       setDataCalender(response.data.calender)
       memberUser.set(response.data.member)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -87,6 +91,21 @@ export default function UpdateDivisionCalender() {
       <LayoutNavbarNew back={`/division/${param.id}/calender/${param.detail}`} title="Edit kalender" menu />
       <Box p={20}>
         <Stack>
+          {loading ?
+            <>
+              <Skeleton height={40} mt={25} radius={10} />
+              <Skeleton height={40} mt={25} radius={10} />
+              <Group justify='space-between'>
+                <Skeleton height={40} width={"47%"} mt={20} radius={10} />
+                <Skeleton height={40} width={"47%"} mt={20} radius={10} />
+              </Group>
+              <Skeleton height={40} mt={25} radius={10} />
+              <Skeleton height={40} mt={25} radius={10} />
+              <Skeleton height={80} mt={25} radius={10} />
+              <Skeleton height={40} mt={20} radius={10} />
+            </>
+            :
+            <>
               <TextInput
                 styles={{
                   input: {
@@ -337,6 +356,8 @@ export default function UpdateDivisionCalender() {
                   </Box>
                 </Box>
               </Box>
+            </>
+          }
         </Stack>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -344,6 +365,9 @@ export default function UpdateDivisionCalender() {
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
+        {loading ?
+          <Skeleton height={50} radius={30} />
+          :
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -354,6 +378,7 @@ export default function UpdateDivisionCalender() {
           >
             Simpan
           </Button>
+        }
       </Box>
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"

src/module/calender/ui/update_list_users.tsx

@@ -2,7 +2,7 @@
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Center, Divider, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Center, Divider, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -171,7 +171,15 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
             })}
           </Box>
         }
-        <Box mt={"xl"}>
+      </Box>
+        <Box  pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        {loading ?
+          <Skeleton height={50} radius={30} />
+          :
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -182,7 +190,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
           >
             Simpan
           </Button>
-        </Box>
+        }
         </Box>
     </Box>
   );

src/module/discussion/ui/form_edit_discussion.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
-import { Box, Group, Avatar, Textarea, Button, Grid, rem } from "@mantine/core"
+import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
 import { useParams, useRouter } from "next/navigation"
 import { useState } from "react"
 import toast from "react-hot-toast"
@@ -13,17 +13,21 @@ export default function FormEditDiscussion() {
    const router = useRouter()
    const param = useParams<{ id: string, detail: string }>()
    const [isDataOne, setDataOne] = useState("")
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       desc: false,
    });
 
    async function fetchGetOneDiscussion() {
       try {
+         setLoading(true)
          const response = await funGetDiscussionById(param.detail)
          setDataOne(response.data.desc)
       } catch (error) {
          console.log(error);
          toast.error("Gagal menampilkan discussion, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -60,9 +64,22 @@ export default function FormEditDiscussion() {
          <Box p={20}>
             <Grid gutter={0} pt={10}>
                <Grid.Col span={"auto"}>
+                  {loading ? 
+                    <Skeleton height={60} width={60} radius={100} />  
+               :   
                   <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               }
                </Grid.Col>
                <Grid.Col span={10}>
+                  {loading ?
+                      Array(10)
+                      .fill(null)
+                      .map((_, i) => (
+                        <Box key={i} mb={20}>
+                          <Skeleton height={20} radius={10} />
+                        </Box>
+                      ))
+               :   
                   <Box>
                      <Textarea
                         placeholder="Tuliskan apa yang ingin anda diskusikan"
@@ -83,6 +100,7 @@ export default function FormEditDiscussion() {
                         }
                      />
                   </Box>
+               }
                </Grid.Col>
             </Grid>
          </Box>
@@ -91,6 +109,9 @@ export default function FormEditDiscussion() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   color="white"
                   bg={WARNA.biruTua}
@@ -109,6 +130,7 @@ export default function FormEditDiscussion() {
                >
                   Simpan
                </Button>
+            }
          </Box>
 
          <LayoutModal opened={isValModal} onClose={() => setValModal(false)}

src/module/division_new/ui/edit_division.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import { Box, Button, rem, Select, Stack, Textarea, TextInput } from '@mantine/core';
+import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -78,6 +78,13 @@ export default function EditDivision() {
       <LayoutNavbarNew back="" title="Edit Divisi" menu />
       <Box p={20}>
         <Stack>
+          {loading ?
+            <>
+              <Skeleton height={40} mt={20} radius={30} />
+              <Skeleton height={"40vh"} mt={20} radius={10} />
+            </>
+            :
+            <>
               <TextInput
                 placeholder="Judul"
                 label="Judul"
@@ -105,6 +112,8 @@ export default function EditDivision() {
                   }
                 }}
               />
+            </>
+          }
         </Stack>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -112,6 +121,9 @@ export default function EditDivision() {
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
+        {loading ?
+          <Skeleton height={50} radius={30} />
+          :
           <Button
             color="white"
             bg={WARNA.biruTua}
@@ -130,6 +142,7 @@ export default function EditDivision() {
           >
             Simpan
           </Button>
+        }
       </Box>
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {

src/module/position/ui/drawer_detail_position.tsx

@@ -1,7 +1,7 @@
 import { LayoutDrawer, WARNA } 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 } from "@mantine/core"
+import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
@@ -17,6 +17,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
+   const [loading, setLoading] = useState(true)
    const [data, setData] = useState<any>({
       id: id,
       name: "",
@@ -49,15 +50,19 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetOnePosition(id)
          if (res.success) {
             setData(res.data)
          } else {
             toast.error(res.message)
          }
+         setLoading(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan jabatan, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -147,6 +152,13 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
             <Box pt={10} pos={"relative"} h={"70vh"}>
+               {loading ?
+                  <Box>
+                     <Skeleton height={40} mt={6} radius={10} />
+                     <Skeleton height={40} mt={15} radius={10} />
+                  </Box>
+                  :
+                  <Box>
                      <Select
                         label="Grup"
                         placeholder="Pilih grup"
@@ -207,6 +219,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                         radius={10}
                         placeholder="Nama Jabatan"
                      />
+                  </Box>
+               }
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}

src/module/project/ui/add_member_detail_project.tsx

@@ -5,8 +5,8 @@ import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_projec
 import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Avatar, Box, Button, Divider, Flex, Group, rem, Stack, Text } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { FaCheck } from 'react-icons/fa6';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -17,27 +17,31 @@ export default function AddMemberDetailProject() {
   const [isData, setData] = useState<IDataMemberProjectDetail[]>([])
   const [isDataMember, setDataMember] = useState<IDataMemberProject[]>([])
   const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [openModal, setOpenModal] = useState(false)
 
 
   async function getData() {
     try {
+      setLoading(true)
       const response = await funGetAllMemberById(param.id)
       if (response.success) {
         setData(response.data.member)
       } else {
         toast.error(response.message)
       }
-
       const res = await funGetOneProjectById(param.id, 'member');
       if (res.success) {
         setDataMember(res.data)
       } else {
         toast.error(res.message);
       }
+      setLoading(false)
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -112,6 +116,15 @@ export default function AddMemberDetailProject() {
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
         </Group>
+        {loading ? 
+          Array(8)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <SkeletonSingle/>
+            </Box>
+          ))
+      :  
         <Box mt={15} mb={100}>
           {isData.map((v, i) => {
             const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
@@ -148,12 +161,16 @@ export default function AddMemberDetailProject() {
             );
           })}
         </Box>
+      }
       </Box>
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
       }}>
+        {loading ? 
+          <Skeleton height={50} radius={30} />
+        :
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -164,6 +181,7 @@ export default function AddMemberDetailProject() {
           >
             Simpan
           </Button>
+      }
         </Box>
 
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/project/ui/edit_detail_task_project.tsx

@@ -5,7 +5,7 @@ import toast from 'react-hot-toast';
 import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 import moment from 'moment';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -15,6 +15,7 @@ export default function EditDetailTaskProject() {
    const [name, setName] = useState("")
    const param = useParams<{ id: string }>()
    const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -47,6 +48,7 @@ export default function EditDetailTaskProject() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetDetailProject(param.id);
          if (res.success) {
             setName(res.data.title)
@@ -57,9 +59,12 @@ export default function EditDetailTaskProject() {
          } else {
             toast.error(res.message);
          }
+         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -88,6 +93,10 @@ export default function EditDetailTaskProject() {
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
                <Box>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <> 
                      <Text>Tanggal Mulai</Text>
                      <Group
                         justify="center"
@@ -97,9 +106,15 @@ export default function EditDetailTaskProject() {
                      >
                         <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
                      </Group>
+                     </>
+                  }
                </Box>
                <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <>
+                        <Text>Tanggal Berakhir</Text>
                         <Group
                            justify="center"
                            bg={"white"}
@@ -108,9 +123,14 @@ export default function EditDetailTaskProject() {
                         >
                            <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
                         </Group>
+                     </>
+                  }
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
+               {loading ?
+                  <Skeleton height={40} mt={20} radius={10} />
+                  :
                   <TextInput
                      styles={{
                         input: {
@@ -131,6 +151,7 @@ export default function EditDetailTaskProject() {
                         )
                      }
                   />
+               }
             </Stack>
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -138,6 +159,9 @@ export default function EditDetailTaskProject() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
             <Button
                c={"white"}
                bg={WARNA.biruTua}
@@ -156,6 +180,7 @@ export default function EditDetailTaskProject() {
             >
                Simpan
             </Button>
+            }
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/project/ui/edit_task_project.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, rem, Stack, TextInput } from '@mantine/core';
+import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -13,6 +13,7 @@ export default function EditTaskProject() {
   const [name, setName] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -41,16 +42,19 @@ export default function EditTaskProject() {
 
   async function getOneData() {
     try {
+      setLoading(true)
       const res = await funGetOneProjectById(param.id, 'data');
       if (res.success) {
         setName(res.data.title);
       } else {
         toast.error(res.message);
       }
-
+      setLoading(false);
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -63,6 +67,9 @@ export default function EditTaskProject() {
       <LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
       <Box p={20}>
         <Stack pt={15}>
+          {loading ? 
+             <Skeleton height={40} mt={20} radius={10} />
+            :
           <TextInput
             styles={{
               input: {
@@ -86,6 +93,7 @@ export default function EditTaskProject() {
             }
             onBlur={() => setTouched({ ...touched, name: true })}
           />
+          }
         </Stack>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -93,6 +101,9 @@ export default function EditTaskProject() {
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
+        {loading ?
+           <Skeleton height={50} radius={30} />
+      :  
         <Button
           c={"white"}
           bg={WARNA.biruTua}
@@ -103,6 +114,7 @@ export default function EditTaskProject() {
         >
           Simpan
         </Button>
+      }
       </Box>
 
 

src/module/task/ui/add_detail_task.tsx

@@ -7,6 +7,7 @@ import {
    Flex,
    Group,
    Input,
+   rem,
    SimpleGrid,
    Stack,
    Text,
@@ -98,7 +99,7 @@ export default function AddDetailTask() {
                   </Group>
                </Box>
                <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Text >Tanggal Berakhir</Text>
                   <Group
                      justify="center"
                      bg={"white"}
@@ -109,7 +110,7 @@ export default function AddDetailTask() {
                   </Group>
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
                <TextInput
                   styles={{
                      input: {
@@ -128,10 +129,19 @@ export default function AddDetailTask() {
                   }
                   }
                   onBlur={() => setTouched({ ...touched, title: true })}
-                  error={touched.title ? "Tahapan wajib diisi" : undefined}
+                  error={
+                     touched.title && (
+                        title == "" ? "Tahapan Tidak Boleh Kosong" : null
+                     )
+                  }
                />
             </Stack>
-            <Box mt={"xl"}>
+         </Box>
+            <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+               maxWidth: rem(550),
+               zIndex: 999,
+               backgroundColor: `${WARNA.bgWhite}`,
+            }}>
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -143,8 +153,6 @@ export default function AddDetailTask() {
                   Simpan
                </Button>
             </Box>
-         </Box>
-
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
             description="Apakah Anda yakin ingin menambahkan tugas?"

src/module/task/ui/create_date_end_task.tsx

@@ -79,7 +79,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             </Group>
           </Box>
           <Box>
-            <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+            <Text >Tanggal Berakhir</Text>
             <Group
               justify="center"
               bg={"white"}
@@ -90,7 +90,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             </Group>
           </Box>
         </SimpleGrid>
-        <Stack pt={15}>
+        <Stack pt={15} mb={100}>
           <TextInput
             styles={{
               input: {

src/module/task/ui/create_users_project.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
 import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
@@ -116,26 +116,11 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
         }
         <Box mt={15} mb={100}>
           {loading ?
-            Array(3)
+            Array(8)
               .fill(null)
               .map((_, i) => (
                 <Box key={i} mb={15}>
-                  <Group>
+                  <SkeletonSingle/>
-                    <Box>
-                      <ActionIcon
-                        variant="light"
-                        bg={"#DCEED8"}
-                        size={"lg"}
-                        radius={100}
-                        aria-label="icon"
-                      >
-                        <Skeleton height={30} width={30} />
-                      </ActionIcon>
-                    </Box>
-                    <Box>
-                      <Skeleton height={20} width={"80%"} />
-                    </Box>
-                  </Group>
                 </Box>
               ))
             :

src/module/task/ui/edit_detail_task.tsx

@@ -9,6 +9,7 @@ import {
    Input,
    rem,
    SimpleGrid,
+   Skeleton,
    Stack,
    Text,
    TextInput,
@@ -29,6 +30,7 @@ export default function EditDetailTask() {
    const [title, setTitle] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
 
    async function onSubmit() {
       if (value[0] == null || value[1] == null)
@@ -58,6 +60,7 @@ export default function EditDetailTask() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetDetailTask(param.detail);
          if (res.success) {
             setTitle(res.data.title)
@@ -68,10 +71,12 @@ export default function EditDetailTask() {
          } else {
             toast.error(res.message);
          }
-
+         setLoading(false)
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan detail tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -101,6 +106,10 @@ export default function EditDetailTask() {
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
                <Box>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <>
                         <Text>Tanggal Mulai</Text>
                         <Group
                            justify="center"
@@ -110,8 +119,14 @@ export default function EditDetailTask() {
                         >
                            <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
                         </Group>
+                     </>
+                  }
                </Box>
                <Box>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <>
                         <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
                         <Group
                            justify="center"
@@ -121,9 +136,14 @@ export default function EditDetailTask() {
                         >
                            <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
                         </Group>
+                     </>
+                  }
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
+               {loading ?
+                  <Skeleton height={40} mt={20} radius={10} />
+                  :
                   <TextInput
                      styles={{
                         input: {
@@ -138,6 +158,7 @@ export default function EditDetailTask() {
                      value={title}
                      onChange={(e) => { setTitle(e.target.value) }}
                   />
+               }
             </Stack>
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -145,6 +166,9 @@ export default function EditDetailTask() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -155,6 +179,7 @@ export default function EditDetailTask() {
                >
                   Simpan
                </Button>
+            }
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/task/ui/edit_task.tsx

@@ -5,6 +5,7 @@ import {
    Button,
    Input,
    rem,
+   Skeleton,
    Stack,
    Textarea,
    TextInput,
@@ -22,6 +23,7 @@ export default function EditTask() {
    const [title, setTitle] = useState("")
    const [openModal, setOpenModal] = useState(false)
    const param = useParams<{ id: string, detail: string }>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -50,16 +52,19 @@ export default function EditTask() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetTaskDivisionById(param.detail, 'data');
          if (res.success) {
             setTitle(res.data.title);
          } else {
             toast.error(res.message);
          }
-
+         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -74,6 +79,9 @@ export default function EditTask() {
          <LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
          <Box p={20}>
             <Stack pt={15}>
+               {loading ?
+                  <Skeleton height={40} mt={20} radius={10} />
+                  :
                   <TextInput
                      styles={{
                         input: {
@@ -97,6 +105,7 @@ export default function EditTask() {
                      }
                      onBlur={() => setTouched({ ...touched, title: true })}
                   />
+               }
             </Stack>
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -104,6 +113,9 @@ export default function EditTask() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -114,6 +126,8 @@ export default function EditTask() {
                >
                   Simpan
                </Button>
+            }
+
          </Box>
 
 

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

@@ -2,7 +2,7 @@
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
-import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Box, Button, rem, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -129,7 +129,7 @@ export default function CreateMember() {
 
   return (
     <Box>
-      <Stack align="center" justify="center" gap="xs" pt={30} px={20}>
+      <Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
         <Box
           bg={WARNA.biruTua}
           py={30}
@@ -406,7 +406,11 @@ export default function CreateMember() {
           }
         />
       </Stack>
-      <Box mt={30} mx={20} pb={20}>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
         <Button
           c={"white"}
           bg={WARNA.biruTua}

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

@@ -3,7 +3,7 @@ import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
-import { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
@@ -25,6 +25,7 @@ export default function EditMember({ id }: { id: string }) {
    const [imgForm, setImgForm] = useState<any>()
    const openRef = useRef<() => void>(null)
    const [img, setIMG] = useState<any | null>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       nik: false,
       name: false,
@@ -63,12 +64,16 @@ export default function EditMember({ id }: { id: string }) {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetOneMember(id)
          setData(res.data)
          getAllPosition(res.data?.idGroup)
          setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
+         setLoading(false)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -143,6 +148,7 @@ export default function EditMember({ id }: { id: string }) {
             gap="xs"
             pt={30}
             px={20}
+            pb={100}
          >
             <Dropzone
                openRef={openRef}
@@ -161,6 +167,9 @@ export default function EditMember({ id }: { id: string }) {
                }}
             >
             </Dropzone>
+            {loading ?
+               <Skeleton height={150} width={150} radius={"100"} />
+               :
                <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
                   <Avatar
                      size="150"
@@ -168,6 +177,20 @@ export default function EditMember({ id }: { id: string }) {
                      src={img}
                   />
                </Indicator>
+            }
+            {loading ?
+               <>
+                  <Skeleton height={40} mt={20} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+                  <Skeleton height={40} mt={10} radius={30} />
+               </>
+               :
+               <>
+
                   <Select
                      placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
@@ -377,8 +400,17 @@ export default function EditMember({ id }: { id: string }) {
                         )
                      }
                   />
+               </>
+            }
          </Stack>
-         <Box mt={30} mx={20} pb={20}>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -404,6 +436,7 @@ export default function EditMember({ id }: { id: string }) {
                >
                   Simpan
                </Button>
+            }
          </Box>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"

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

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Avatar, Box, Button, Flex, Indicator, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import toast from "react-hot-toast";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useRef, useState } from "react";
@@ -19,6 +19,7 @@ export default function EditProfile() {
   const [img, setIMG] = useState<any | null>()
   const [imgForm, setImgForm] = useState<any>()
   const router = useRouter()
+  const [loading, setLoading] = useState(true)
 
   const [touched, setTouched] = useState({
     nik: false,
@@ -41,11 +42,15 @@ export default function EditProfile() {
 
   async function getAllProfile() {
     try {
+      setLoading(true)
       const res = await funGetProfileByCookies()
       setData(res.data)
       setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
+      setLoading(false)
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -104,6 +109,9 @@ export default function EditProfile() {
         >
         </Dropzone>
 
+        {loading ?
+          <Skeleton height={150} width={150} radius={"100"} />
+          :
           <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
             <Avatar
               size="150"
@@ -111,6 +119,17 @@ export default function EditProfile() {
               src={img}
             />
           </Indicator>
+        }
+        {loading ?
+          <>
+            <Skeleton height={40} mt={20} radius={30} />
+            <Skeleton height={40} mt={20} radius={30} />
+            <Skeleton height={40} mt={20} radius={30} />
+            <Skeleton height={40} mt={20} radius={30} />
+            <Skeleton height={40} mt={20} radius={30} />
+          </>
+          :
+          <>
             <TextInput
               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
               styles={{
@@ -231,8 +250,17 @@ export default function EditProfile() {
                 )
               }
             />
+          </>
+        }
       </Stack>
-      <Box mt={30} mx={20} pb={20}>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        {loading ? 
+           <Skeleton height={50} radius={30} />
+          :
         <Button
           c={"white"}
           bg={WARNA.biruTua}
@@ -255,6 +283,7 @@ export default function EditProfile() {
         >
           Simpan
         </Button>
+        }
       </Box>
       <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
         description="Apakah Anda yakin ingin