upd: skeleton loading

Deskripsi:
- home
- list lembaga desa
- list jabatan
- list member
- detail member

No Issues

components/home/divisionHome.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import PaperGridContent from "../paperGridContent";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -18,14 +19,18 @@ export default function DivisionHome() {
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
+   const [loading, setLoading] = useState(true)
 
    async function handleData() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "division", user: hasil })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -38,27 +43,32 @@ export default function DivisionHome() {
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Divisi Teraktif</Text>
-         <Carousel
-            ref={ref}
-            style={{ width: "100%" }}
-            width={width * 0.8}
-            height={235}
-            data={data}
-            loop={true}
-            autoPlay={false}
-            autoPlayReverse={false}
-            pagingEnabled={true}
-            snapEnabled={true}
-            vertical={false}
-            renderItem={({ index }) => (
-               <PaperGridContent onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning">
-                  <View>
-                     <Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
-                     <Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>
-                  </View>
-               </PaperGridContent>
-            )}
-         />
+         {
+            loading ? <Skeleton width={100} height={150} borderRadius={10} widthType="percent" />
+               :
+               <Carousel
+                  ref={ref}
+                  style={{ width: "100%" }}
+                  width={width * 0.8}
+                  height={235}
+                  data={data}
+                  loop={true}
+                  autoPlay={false}
+                  autoPlayReverse={false}
+                  pagingEnabled={true}
+                  snapEnabled={true}
+                  vertical={false}
+                  renderItem={({ index }) => (
+                     <PaperGridContent onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning">
+                        <View>
+                           <Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
+                           <Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>
+                        </View>
+                     </PaperGridContent>
+                  )}
+               />
+         }
+
       </View>
    )
 }