upd: skeleton loading

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

No Issues

app/(application)/member/index.tsx

@@ -2,6 +2,7 @@ import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -9,7 +10,7 @@ import { AntDesign, Feather } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, Text, View } from "react-native";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 type Props = {
    id: string,
@@ -32,25 +33,31 @@ export default function Index() {
    const [search, setSearch] = useState('')
    const [nameGroup, setNameGroup] = useState('')
    const [data, setData] = useState<Props[]>([])
-   const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [loading, setLoading] = useState(true)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetUser({ user: hasil, active: String(active), search: search, group: String(group) })
          setData(response.data)
          setNameGroup(response.filter.name)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad()
-   }, [active, search, group, update])
-
+      handleLoad(true)
+   }, [active, search, group])
 
+   useEffect(() => {
+      handleLoad(false)
+   }, [update])
 
 
    return (
@@ -61,14 +68,14 @@ export default function Index() {
                   <ButtonTab
                      active={active == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.push(`/member?active=true&group=${group}&search=${search}`) }}
+                     onPress={() => { router.replace(`/member?active=true&group=${group}&search=${search}`) }}
                      label="Aktif"
                      icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={active == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.push(`/member?active=false&group=${group}&search=${search}`) }}
+                     onPress={() => { router.replace(`/member?active=false&group=${group}&search=${search}`) }}
                      label="Tidak Aktif"
                      icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
@@ -82,25 +89,31 @@ export default function Index() {
                }
                <View>
                   {
-                     data.length > 0
-                        ?
-                        data.map((item, index) => {
+                     loading ?
+                        arrSkeleton.map((item, index) => {
                            return (
-                              <BorderBottomItem
-                                 key={index}
-                                 onPress={() => { router.push(`/member/${item.id}`) }}
-                                 borderType="all"
-                                 icon={
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />
-                                 }
-                                 title={item.name}
-                                 subtitle={`${item.group} - ${item.position}`}
-                              />
+                              <SkeletonTwoItem key={index} />
                            )
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-
+                        data.length > 0
+                           ?
+                           data.map((item, index) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={index}
+                                    onPress={() => { router.push(`/member/${item.id}`) }}
+                                    borderType="all"
+                                    icon={
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />
+                                    }
+                                    title={item.name}
+                                    subtitle={`${item.group} - ${item.position}`}
+                                 />
+                              )
+                           })
+                           :
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                   }
                </View>
             </View>