upd: skeleton loading

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

No Issues

components/home/eventHome.tsx

@@ -1,10 +1,11 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { router } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import EventItem from "../eventItem";
-import { router } from "expo-router";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -23,14 +24,18 @@ type Props = {
 export default function EventHome() {
    const { decryptToken, token } = useAuthSession()
    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: "event", user: hasil })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -42,14 +47,21 @@ export default function EventHome() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Acara Hari Ini</Text>
          <View style={[Styles.wrapPaper]}>
+
             {
-               data.length > 0 ?
-                  data.map((item, index) => {
-                     return (
-                        <EventItem key={index} category={index % 2 == 0 ? 'purple' : 'orange'} onPress={() => {router.push(`/division/${item.idDivision}/calendar/${item.id}`)}} title={item.title} user={item.user_name} jamAwal={item.timeStart} jamAkhir={item.timeEnd} />
-                     )
-                  })
-                  : <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara hari ini</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) => {
+                        return (
+                           <EventItem key={index} category={index % 2 == 0 ? 'purple' : 'orange'} onPress={() => { router.push(`/division/${item.idDivision}/calendar/${item.id}`) }} title={item.title} user={item.user_name} jamAwal={item.timeStart} jamAkhir={item.timeEnd} />
+                        )
+                     })
+                     : <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara hari ini</Text>
             }
          </View>
       </View>