diff --git a/src/module/_global/components/skeleton_detail_discussion_comment.tsx b/src/module/_global/components/skeleton_detail_discussion_comment.tsx
new file mode 100644
index 0000000..609b805
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/module/_global/components/skeleton_detail_discussion_member.tsx b/src/module/_global/components/skeleton_detail_discussion_member.tsx
new file mode 100644
index 0000000..f3119bb
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 58ce0d8..1786a69 100644
--- a/src/module/_global/index.ts
+++ b/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}
\ No newline at end of file
+export { SkeletonSingle }
+export { SkeletonDetailDiscussionComment }
+export { SkeletonDetailDiscussionMember }
\ No newline at end of file
diff --git a/src/module/discussion/ui/detail_discussion.tsx b/src/module/discussion/ui/detail_discussion.tsx
index 0b81a73..9b1e8ec 100644
--- a/src/module/discussion/ui/detail_discussion.tsx
+++ b/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()
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
<>
-
-
-
-
-
- {isData?.username}
-
- {isData?.status === 1 ? "BUKA" : "TUTUP"}
-
-
- {isData?.createdAt}
-
-
- {isData?.desc}
-
-
-
-
- {isData?.totalComments} Komentar
-
-
-
-
- {isData?.DivisionDisscussionComment.map((v, i) => {
- return (
+ {isLoad ?
+ Array(1)
+ .fill(null)
+ .map((_, i) => (
-
-
-
-
-
- {v.username}
-
-
-
- {moment(v.createdAt).format("LL")}
-
- {v.comment}
-
-
-
+
- );
- })}
+ )) :
+
+
+ {isData?.username ?
+
+
+
+
+ {isData?.username}
+
+ {isData?.status === 1 ? "BUKA" : "TUTUP"}
+
+ : ""
+ }
+ {isData?.createdAt}
+
+
+ {isData?.desc}
+
+
+ {isData?.totalComments ?
+
+ {isData?.totalComments} Komentar
+ : ""}
+
+
+
+ }
+
+ {isLoad ?
+ Array(6)
+ .fill(0)
+ .map((_, i) => (
+
+
+
+ )) :
+ isData?.DivisionDisscussionComment.map((v, i) => {
+ return (
+
+
+
+
+
+
+ {v.username}
+
+
+
+ {moment(v.createdAt).format("LL")}
+
+ {v.comment}
+
+
+
+
+ );
+ })
+ }