Merge pull request #116 from bipproduction/lukman/15-agustus-2024

feat : update skeleton

src/module/_global/components/skeleton_detail_discussion_comment.tsx

@@ -0,0 +1,29 @@
+import { ActionIcon, Box, Divider, Group, Skeleton } from "@mantine/core";
+
+export default function SkeletonDetailDiscussionComment() {
+  return (
+    <>
+      <Group justify='space-between'>
+        <Box>
+          <Box>
+            <ActionIcon
+              variant="light"
+              bg={"#DCEED8"}
+              size={50}
+              radius={100}
+              aria-label="icon"
+            >
+              <Skeleton height={25} width={25} />
+            </ActionIcon>
+          </Box>
+          <Skeleton height={15} mt={6} width="50%" radius="xl" />
+        </Box>
+        <Skeleton height={15} mt={6} width="30%" radius="xl" />
+      </Group>
+      <Skeleton height={40} radius="xl" />
+      <Box mt={20}>
+        <Divider size={"xs"} />
+      </Box>
+    </>
+  );
+}

src/module/_global/components/skeleton_detail_discussion_member.tsx

@@ -0,0 +1,38 @@
+import { ActionIcon, Box, Flex, Group, Skeleton } from '@mantine/core';
+import React from 'react';
+
+export default function SkeletonDetailDiscussionMember() {
+  return (
+    <>
+      <Flex justify="space-between" align="center" mt={20}>
+        <Group>
+          <Box>
+            <ActionIcon
+              variant="light"
+              bg={"#DCEED8"}
+              size={50}
+              radius={100}
+              aria-label="icon"
+            >
+              <Skeleton height={25} width={25} />
+            </ActionIcon>
+          </Box>
+          <Box>
+            <Skeleton height={8} mt={6} width="50%" radius="xl" />
+            <Skeleton height={8} mt={6} width="30%" radius="xl" />
+          </Box>
+        </Group>
+        <Skeleton height={8} mt={6} width="30%" radius="xl" />
+      </Flex>
+      <Box mt={10}>
+        <Skeleton height={8} radius="xl" />
+      </Box>
+      <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+        <Group gap={5} align="center">
+          <Skeleton height={8} mt={6} width="30%" radius="xl" />
+        </Group>
+      </Group>
+    </>
+  );
+}
+

src/module/_global/index.ts

@@ -1,5 +1,7 @@
 import prisma from "./bin/prisma";
 import { pwd_key_config } from "./bin/val_global";
+import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
+import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
 import SkeletonSingle from "./components/skeleton_single";
 import { WARNA } from "./fun/WARNA";
 import LayoutDrawer from "./layout/layout_drawer";
@@ -20,4 +22,6 @@ export { LayoutNavbarNew };
 export { ViewFilter };
 export { prisma };
 export { pwd_key_config };
-export {SkeletonSingle}
+export { SkeletonSingle }
+export { SkeletonDetailDiscussionComment }
+export { SkeletonDetailDiscussionMember }

src/module/discussion/ui/detail_discussion.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
-import { WARNA } from "@/module/_global";
+import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
 import NavbarDetailDiscussion from "@/module/discussion/ui/navbar_detail_discussion";
@@ -17,13 +17,18 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const [isData, setData] = useState<IDetailDiscussion>()
    const [isComent, setIsComent] = useState("")
    const param = useParams<{ id: string, detail: string }>()
+   const [isLoad, setIsLoad] = useState(false)
 
    const getData = async () => {
       try {
+         setIsLoad(true)
          const response = await funGetDiscussionById(id)
          setData(response.data)
+         setIsLoad(false)
       } catch (error) {
          console.log(error)
+      } finally {
+         setIsLoad(false)
       }
    }
 
@@ -55,11 +60,21 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
       <>
          <NavbarDetailDiscussion id={id} status={Number(isData?.status)} idDivision={idDivision} />
          <Box p={20}>
+            {isLoad ?
+               Array(1)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i} p={10}>
+                        <SkeletonDetailDiscussionMember/>
+                     </Box>
+                  )) :
+               <Box>
                   <Flex
                      justify={"space-between"}
                      align={"center"}
                      mt={20}
                   >
+                     {isData?.username ?
                         <Group>
                            <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
                            <Box>
@@ -68,21 +83,32 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               </Text>
                               <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                            </Box>
-               </Group>
+                        </Group> : ""
+                     }
                      <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
                   </Flex>
                   <Box mt={10}>
                      <Text fw={"bold"}>{isData?.desc}</Text>
                   </Box>
                   <Group justify="space-between" mt={20} c={'#8C8C8C'}>
-               <Group gap={5} align="center">
+                     {isData?.totalComments ? <Group gap={5} align="center">
                         <GrChatOption size={18} />
                         <Text fz={13}>{isData?.totalComments} Komentar</Text>
-               </Group >
+                     </Group > : ""}
-            </Group>
 
+                  </Group>
+               </Box>
+            }
             <Box p={10}>
-               {isData?.DivisionDisscussionComment.map((v, i) => {
+               {isLoad ?
+                  Array(6)
+                     .fill(0)
+                     .map((_, i) => (
+                        <Box key={i} p={10}>
+                          <SkeletonDetailDiscussionComment />
+                        </Box>
+                     )) :
+                  isData?.DivisionDisscussionComment.map((v, i) => {
                      return (
                         <Box key={i} p={10}>
                            <Flex
@@ -105,7 +131,8 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                            </Box>
                         </Box>
                      );
-               })}
+                  })
+               }
             </Box>
             <Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
                zIndex: 999