upd: skeleton

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

NO Issuese

components/division/fileDivisionDetail.tsx

@@ -1,11 +1,12 @@
 import Styles from "@/constants/Styles";
+import { apiGetDivisionOneFeature } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Feather } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
-import { useAuthSession } from "@/providers/AuthProvider";
-import { useLocalSearchParams } from "expo-router";
-import { apiGetDivisionOneFeature } from "@/lib/api";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -21,14 +22,18 @@ export default function FileDivisionDetail() {
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -40,40 +45,47 @@ export default function FileDivisionDetail() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
          {
-            data.length > 0 ?
-               <Carousel
-                  ref={ref}
-                  width={width}
-                  height={115}
-                  data={data}
-                  loop={true}
-                  autoPlay={false}
-                  autoPlayReverse={false}
-                  pagingEnabled={true}
-                  snapEnabled={true}
-                  vertical={false}
-                  style={{
-                     width: width,
-                  }}
-                  mode="parallax"
-                  modeConfig={{
-                     parallaxScrollingScale: 1,
-                     parallaxScrollingOffset: 280,
-                  }}
-                  renderItem={({ index }) => (
-                     <View style={{ margin: 'auto', width: '28%' }}>
-                        <View style={{ alignItems: 'center' }}>
-                           <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                              <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-                           </View>
-                        </View>
-                        <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
-                     </View>
-
-                  )}
-               />
+            loading ?
+               <View style={[Styles.rowSpaceBetween]}>
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+               </View>
                :
-               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+               data.length > 0 ?
+                  <Carousel
+                     ref={ref}
+                     width={width}
+                     height={115}
+                     data={data}
+                     loop={true}
+                     autoPlay={false}
+                     autoPlayReverse={false}
+                     pagingEnabled={true}
+                     snapEnabled={true}
+                     vertical={false}
+                     style={{
+                        width: width,
+                     }}
+                     mode="parallax"
+                     modeConfig={{
+                        parallaxScrollingScale: 1,
+                        parallaxScrollingOffset: 280,
+                     }}
+                     renderItem={({ index }) => (
+                        <View style={{ margin: 'auto', width: '28%' }}>
+                           <View style={{ alignItems: 'center' }}>
+                              <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
+                                 <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
+                              </View>
+                           </View>
+                           <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                        </View>
+
+                     )}
+                  />
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
          }
       </View>
    )