upd: skeleton loading

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

No Issues

components/home/chartDokumenHome.tsx

@@ -4,6 +4,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
+import Skeleton from "../skeleton";
 
 type Props = {
    value: number;
@@ -12,6 +13,7 @@ type Props = {
 }[]
 
 export default function ChartDokumenHome() {
+   const [loading, setLoading] = useState(true)
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props>([])
    const [maxValue, setMaxValue] = useState(5)
@@ -24,6 +26,7 @@ export default function ChartDokumenHome() {
 
    async function handleData() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
          const maxValue = response.data.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), -Infinity);
@@ -37,6 +40,8 @@ export default function ChartDokumenHome() {
          setData(convertedArray)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -47,28 +52,33 @@ export default function ChartDokumenHome() {
    return (
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
-         <BarChart
-            showFractionalValues={false}
-            showYAxisIndices
-            noOfSections={4}
-            maxValue={maxValue}
-            data={data}
-            isAnimated
-            width={width - 140}
-            barWidth={width * 0.25}
-            renderTooltip={(item: any, index: any) => {
-               return (
-                  <View
-                     style={{
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: width * 0.25
-                     }}>
-                     <Text>{item.value}</Text>
-                  </View>
-               );
-            }}
-         />
+         {
+            loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
+               :
+               <BarChart
+                  showFractionalValues={false}
+                  showYAxisIndices
+                  noOfSections={4}
+                  maxValue={maxValue}
+                  data={data}
+                  isAnimated
+                  width={width - 140}
+                  barWidth={width * 0.25}
+                  renderTooltip={(item: any, index: any) => {
+                     return (
+                        <View
+                           style={{
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              width: width * 0.25
+                           }}>
+                           <Text>{item.value}</Text>
+                        </View>
+                     );
+                  }}
+               />
+         }
+
       </View>
    )
 }