upd: skeleton loading

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

No Issues

app/(application)/group/index.tsx

@@ -6,6 +6,7 @@ import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
 import InputSearch from "@/components/inputSearch";
 import MenuItemRow from "@/components/menuItemRow";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
@@ -30,6 +31,8 @@ export default function Index() {
    const [isVisibleEdit, setVisibleEdit] = useState(false)
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [loading, setLoading] = useState(true)
 
    const [idChoose, setIdChoose] = useState('')
    const [activeChoose, setActiveChoose] = useState(true)
@@ -67,19 +70,28 @@ export default function Index() {
       }
    }
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetGroup({ user: hasil, active: String(active), search: search })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
+
       }
    }
 
    useEffect(() => {
-      handleLoad()
-   }, [active, search, update])
+      handleLoad(true)
+   }, [active, search])
+
+   useEffect(() => {
+      handleLoad(false)
+   }, [update])
+
 
    return (
       <SafeAreaView>
@@ -89,14 +101,14 @@ export default function Index() {
                   <ButtonTab
                      active={active == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.push('/group?active=true') }}
+                     onPress={() => { router.replace('/group?active=true') }}
                      label="Aktif"
                      icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={active == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.push('/group?active=false') }}
+                     onPress={() => { router.replace('/group?active=false') }}
                      label="Tidak Aktif"
                      icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
@@ -104,29 +116,37 @@ export default function Index() {
                <InputSearch onChange={setSearch} />
                <View>
                   {
-                     data.length > 0 ?
-                        data.map((item, index) => {
+
+                     loading ?
+                        arrSkeleton.map((item, index) => {
                            return (
-                              <BorderBottomItem
-                                 key={index}
-                                 onPress={() => {
-                                    setIdChoose(item.id)
-                                    setActiveChoose(item.isActive)
-                                    setTitleChoose(item.name)
-                                    setModal(true)
-                                 }}
-                                 borderType="all"
-                                 icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
-                                    </View>
-                                 }
-                                 title={item.name}
-                              />
+                              <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={() => {
+                                       setIdChoose(item.id)
+                                       setActiveChoose(item.isActive)
+                                       setTitleChoose(item.name)
+                                       setModal(true)
+                                    }}
+                                    borderType="all"
+                                    icon={
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                          <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                                       </View>
+                                    }
+                                    title={item.name}
+                                 />
+                              )
+                           })
+                           :
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                   }
                </View>
             </View>