upd: skeleton

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

NO Issuese

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -3,8 +3,9 @@ import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
+import SkeletonContent from "@/components/skeletonContent";
 import Styles from "@/constants/Styles";
-import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
+import { apiGetDiscussion } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
@@ -32,21 +33,30 @@ export default function DiscussionDivision() {
    const { token, decryptToken } = useAuthSession()
    const [search, setSearch] = useState('')
    const update = useSelector((state: any) => state.discussionUpdate);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDiscussion({ user: hasil, search, division: id, active })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
+   useEffect(() => {
+      handleLoad(false)
+   }, [update.data])
+
 
    useEffect(() => {
-      handleLoad()
-   }, [active, search, update.data])
+      handleLoad(true)
+   }, [active, search])
 
    return (
       <SafeAreaView>
@@ -70,35 +80,44 @@ export default function DiscussionDivision() {
                </View>
                <InputSearch onChange={setSearch} />
                <View>
-                  {data.length > 0 ?
-                     data.map((item, index) => (
-                        <BorderBottomItem
-                           key={index}
-                           width={55}
-                           onPress={() => { router.push(`./discussion/${item.id}`) }}
-                           borderType="bottom"
-                           icon={
-                              <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                           }
-                           title={item.user_name}
-                           subtitle={
-                              active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
-                           }
-                           rightTopInfo={item.createdAt}
-                           desc={item.desc}
-                           leftBottomInfo={
-                              <View style={[Styles.rowItemsCenter]}>
-                                 <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                              </View>
-                           }
-                           rightBottomInfo={item.total_komentar + ' Komentar'}
-                        />
-                     ))
-                     :
-                     (
-                        <Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
-                     )}
+                  {
+                     loading ?
+                        arrSkeleton.map((item: any, i: number) => {
+                           return (
+                              <SkeletonContent key={i} />
+                           )
+                        })
+                        :
+                        data.length > 0 ?
+                           data.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 width={55}
+                                 onPress={() => { router.push(`./discussion/${item.id}`) }}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                 }
+                                 title={item.user_name}
+                                 subtitle={
+                                    active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
+                                 }
+                                 rightTopInfo={item.createdAt}
+                                 desc={item.desc}
+                                 leftBottomInfo={
+                                    <View style={[Styles.rowItemsCenter]}>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                    </View>
+                                 }
+                                 rightBottomInfo={item.total_komentar + ' Komentar'}
+                              />
+                           ))
+                           :
+                           (
+                              <Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
+                           )
+                  }
                </View>
             </View>
          </ScrollView>