upd: skeleton

Deskripsi:
- divisi
- detail divisi
- informasi divisi
- calender list
- calender detail
- history
- diskusi list
- detail diskusi
- list task divisi

NO Issuese

components/division/discussionDivisionDetail.tsx

@@ -5,6 +5,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import DiscussionItem from "../discussionItem";
+import Skeleton from "../skeleton";
 
 type Props = {
   id: string;
@@ -18,9 +19,11 @@ export default function DiscussionDivisionDetail() {
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
+  const [loading, setLoading] = useState(true)
 
   async function handleLoad() {
     try {
+      setLoading(true)
       const hasil = await decryptToken(String(token?.current));
       const response = await apiGetDivisionOneFeature({
         user: hasil,
@@ -30,6 +33,8 @@ export default function DiscussionDivisionDetail() {
       setData(response.data);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -40,25 +45,34 @@ export default function DiscussionDivisionDetail() {
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
       <View style={[Styles.wrapPaper]}>
-        {data.length > 0 ? (
-          data.map((item, index) => (
-            <DiscussionItem
-              key={index}
-              title={item.desc}
-              user={item.user}
-              date={item.date}
-              onPress={() => {
-                router.push(`/division/${id}/discussion/${item.id}`);
-              }}
-            />
-          ))
-        ) : (
-          <Text
-            style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
-          >
-            Tidak ada diskusi
-          </Text>
-        )}
+
+        {
+          loading ?
+            <>
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+            </>
+            :
+            data.length > 0 ? (
+              data.map((item, index) => (
+                <DiscussionItem
+                  key={index}
+                  title={item.desc}
+                  user={item.user}
+                  date={item.date}
+                  onPress={() => {
+                    router.push(`/division/${id}/discussion/${item.id}`);
+                  }}
+                />
+              ))
+            ) : (
+              <Text
+                style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
+              >
+                Tidak ada diskusi
+              </Text>
+            )
+        }
       </View>
     </View>
   );