style: update skelaton

src/module/division_new/ui/information_division.tsx

@@ -21,7 +21,7 @@ export default function InformationDivision() {
   const [name, setName] = useState('')
   const [deskripsi, setDeskripsi] = useState('')
   const [member, setMember] = useState<IDataMemberDivision[]>([])
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [valChooseMember, setChooseMember] = useState("")
   const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
   const [valChooseMemberName, setChooseMemberName] = useState("")
@@ -137,12 +137,36 @@ export default function InformationDivision() {
               <Text>{member.length} Anggota</Text>
             </Box>
             <Box mt={15}>
-              <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
-                <Avatar size="lg">
-                  <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
-                </Avatar>
-                <Text>Tambah Anggota</Text>
-              </Group>
+              {loading ?
+                <Group
+                  align="center"
+                  style={{
+                    padding: 10,
+                  }}
+                >
+                  <Box>
+                    <ActionIcon
+                      variant="light"
+                      bg={"#DCEED8"}
+                      size={50}
+                      radius={100}
+                      aria-label="icon"
+                    >
+                      <Skeleton height={25} width={25} />
+                    </ActionIcon>
+                  </Box>
+                  <Box>
+                    <Skeleton height={20} width={100} />
+                  </Box>
+                </Group>
+                :
+                <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
+                  <Avatar size="lg">
+                    <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
+                  </Avatar>
+                  <Text>Tambah Anggota</Text>
+                </Group>
+              }
             </Box>
             <Box pt={10}>
               <Box mb={10}>

src/module/division_new/ui/list_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
@@ -95,72 +95,98 @@ export default function ListDivision() {
             </Flex>
           </Grid.Col>
         </Grid>
-          <Box pt={20}>
+        <Box pt={20}>
+          {loading ?
+            <>
+              <Skeleton width={"100%"} height={100} radius={"md"} />
+            </>
+            :
             <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
               <Text fw={'bold'} c={'white'}>Total Divisi</Text>
               <Flex justify={'center'} align={'center'} h={'100%'}>
                 <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
               </Flex>
             </Box>
-          </Box>
+          }
+        </Box>
         {isList ? (
           <Box pt={20}>
-            {data?.map((v: any, i: any) => {
-              return (
-                <Box key={i}>
-                  <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
-                    <Group>
-                      <Center>
-                        <ActionIcon
-                          variant="gradient"
-                          size={50}
-                          aria-label="Gradient action icon"
-                          radius={100}
-                          gradient={{
-                            from: '#DFDA7C',
-                            to: '#F2AF46',
-                            deg: 174
-                          }}
-                        >
-                          <HiMiniUserGroup size={25} color={WARNA.biruTua} />
-                        </ActionIcon>
-                      </Center>
-                      <Text>{v.name}</Text>
+            {loading
+              ? Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i}>
+                    <SkeletonSingle />
+                  </Box>
+                ))
+              :
+              data?.map((v: any, i: any) => {
+                return (
+                  <Box key={i}>
+                    <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
+                      <Group>
+                        <Center>
+                          <ActionIcon
+                            variant="gradient"
+                            size={50}
+                            aria-label="Gradient action icon"
+                            radius={100}
+                            gradient={{
+                              from: '#DFDA7C',
+                              to: '#F2AF46',
+                              deg: 174
+                            }}
+                          >
+                            <HiMiniUserGroup size={25} color={WARNA.biruTua} />
+                          </ActionIcon>
+                        </Center>
+                        <Text>{v.name}</Text>
+                      </Group>
                     </Group>
-                  </Group>
-                  <Divider my="sm" />
-                </Box>
-              );
-            })}
+                    <Divider my="sm" />
+                  </Box>
+                );
+              })
+            }
           </Box>
         ) : (
-            <Box pt={20}>
-            {data?.map((v: any, i: any) => {
-              return (
-                <Box key={i} mb={20}>
-                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
-                    <Card.Section>
-                      <Box h={120} bg={WARNA.biruTua}>
-                        <Flex justify={'center'} align={'center'} h={"100%"}>
-                          <Title order={3} c={"white"}>{v.name}</Title>
-                        </Flex>
+          <Box pt={20}>
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} pb={20}>
+                    <Skeleton width={"100%"} height={200} radius={"md"} />
+                  </Box>
+                ))
+              :
+              data?.map((v: any, i: any) => {
+                return (
+                  <Box key={i} mb={20}>
+                    <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
+                      <Card.Section>
+                        <Box h={120} bg={WARNA.biruTua}>
+                          <Flex justify={'center'} align={'center'} h={"100%"}>
+                            <Title order={3} c={"white"}>{v.name}</Title>
+                          </Flex>
+                        </Box>
+                      </Card.Section>
+                      <Box pt={10}>
+                        <Text lineClamp={2}>{v.desc}</Text>
+                        <Group align='center' pt={10} justify='flex-end'>
+                          <Avatar.Group>
+                            <Avatar>
+                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                            </Avatar>
+                            <Avatar>+{v.jumlah_member - 1}</Avatar>
+                          </Avatar.Group>
+                        </Group>
                       </Box>
-                    </Card.Section>
-                    <Box pt={10}>
-                      <Text lineClamp={2}>{v.desc}</Text>
-                      <Group align='center' pt={10} justify='flex-end'>
-                        <Avatar.Group>
-                          <Avatar>
-                            <MdAccountCircle size={32} color={WARNA.biruTua} />
-                          </Avatar>
-                          <Avatar>+{v.jumlah_member - 1}</Avatar>
-                        </Avatar.Group>
-                      </Group>
-                    </Box>
-                  </Card>
-                </Box>
-              );
-            })}
+                    </Card>
+                  </Box>
+                );
+              })
+            }
           </Box>
         )}
       </Box>

src/module/division_new/ui/navbar_create_users.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -17,6 +17,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
   const member = useHookstate(globalMemberDivision)
   const [selectedFiles, setSelectedFiles] = useState<any>([]);
   const [dataMember, setDataMember] = useState<TypeUser>([])
+  const [loading, setLoading] = useState(true)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -28,6 +29,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
 
 
   async function loadData(search: string) {
+    setLoading(true)
     const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
     const user = await funGetUserByCookies();
 
@@ -41,7 +43,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
     } else {
       toast.error(res.message)
     }
-
+    setLoading(false)
   }
 
 
@@ -77,35 +79,51 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
             onChange={(e) => loadData(e.target.value)}
           />
           <Box pt={10}>
-            <SimpleGrid
-              cols={{ base: 2, sm: 2, lg: 2 }}
-              spacing={{ base: 20, sm: "xl" }}
-              verticalSpacing={{ base: "md", sm: "xl" }}
-            >
-              {dataMember.map((v, index) => {
-                const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
-                return (
-                  <Box key={index} mb={10}>
-                    <Box
-                      bg={isSelected ? WARNA.bgHijauMuda : "white"}
-                      style={{
-                        border: `1px solid ${WARNA.biruTua}`,
-                        borderRadius: 20,
-                      }}
-                      py={10}
-                      onClick={() => handleFileClick(index)}
-                    >
-                      <Center>
-                        <Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
-                      </Center>
-                      <Text mt={20} ta="center">
-                        {v.name}
-                      </Text>
+            {loading ?
+              <SimpleGrid
+                cols={{ base: 2, sm: 2, lg: 2 }}
+                spacing={{ base: 20, sm: "xl" }}
+                verticalSpacing={{ base: "md", sm: "xl" }}
+              >
+                {Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                    <Box key={i}>
+                      <Skeleton width={"100%"} height={100} radius={"md"} />
                     </Box>
-                  </Box>
-                );
-              })}
-            </SimpleGrid>
+                  ))}
+              </SimpleGrid>
+              :
+              <SimpleGrid
+                cols={{ base: 2, sm: 2, lg: 2 }}
+                spacing={{ base: 20, sm: "xl" }}
+                verticalSpacing={{ base: "md", sm: "xl" }}
+              >
+                {dataMember.map((v, index) => {
+                  const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
+                  return (
+                    <Box key={index} mb={10}>
+                      <Box
+                        bg={isSelected ? WARNA.bgHijauMuda : "white"}
+                        style={{
+                          border: `1px solid ${WARNA.biruTua}`,
+                          borderRadius: 20,
+                        }}
+                        py={10}
+                        onClick={() => handleFileClick(index)}
+                      >
+                        <Center>
+                          <Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
+                        </Center>
+                        <Text mt={20} ta="center">
+                          {v.name}
+                        </Text>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </SimpleGrid>
+            }
           </Box>
         </Stack>
         <Box mt="xl">