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,57 +60,79 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
       <>
          <NavbarDetailDiscussion id={id} status={Number(isData?.status)} idDivision={idDivision} />
          <Box p={20}>
-            <Flex
-               justify={"space-between"}
-               align={"center"}
-               mt={20}
-            >
-               <Group>
-                  <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
-                  <Box>
-                     <Text c={WARNA.biruTua} fw={"bold"}>
-                        {isData?.username}
-                     </Text>
-                     <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
-                  </Box>
-               </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">
-                  <GrChatOption size={18} />
-                  <Text fz={13}>{isData?.totalComments} Komentar</Text>
-               </Group >
-            </Group>
-
-            <Box p={10}>
-               {isData?.DivisionDisscussionComment.map((v, i) => {
-                  return (
+            {isLoad ?
+               Array(1)
+                  .fill(null)
+                  .map((_, i) => (
                      <Box key={i} p={10}>
-                        <Flex
-                           justify={"space-between"}
-                           align={"center"}
-                        >
-                           <Group>
-                              <Avatar alt="it's me" size="md" />
-                              <Box>
-                                 <Text c={WARNA.biruTua} fw={"bold"} fz={15}>
-                                    {v.username}
-                                 </Text>
-                              </Box>
-                           </Group>
-                           <Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
-                        </Flex>
-                        <Box mt={10}>{v.comment}</Box>
-                        <Box mt={20}>
-                           <Divider size={"xs"} />
-                        </Box>
+                        <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>
+                              <Text c={WARNA.biruTua} fw={"bold"}>
+                                 {isData?.username}
+                              </Text>
+                              <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
+                           </Box>
+                        </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'}>
+                     {isData?.totalComments ? <Group gap={5} align="center">
+                        <GrChatOption size={18} />
+                        <Text fz={13}>{isData?.totalComments} Komentar</Text>
+                     </Group > : ""}
+
+                  </Group>
+               </Box>
+            }
+            <Box p={10}>
+               {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
+                              justify={"space-between"}
+                              align={"center"}
+                           >
+                              <Group>
+                                 <Avatar alt="it's me" size="md" />
+                                 <Box>
+                                    <Text c={WARNA.biruTua} fw={"bold"} fz={15}>
+                                       {v.username}
+                                    </Text>
+                                 </Box>
+                              </Group>
+                              <Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
+                           </Flex>
+                           <Box mt={10}>{v.comment}</Box>
+                           <Box mt={20}>
+                              <Divider size={"xs"} />
+                           </Box>
+                        </Box>
+                     );
+                  })
+               }
             </Box>
             <Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
                zIndex: 999