upd: skeleton loading

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

No Issues

app/(application)/position/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 { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
@@ -26,6 +27,8 @@ type Props = {
 }
 
 export default function Index() {
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [loading, setLoading] = useState(true)
    const { token, decryptToken } = useAuthSession()
    const entityUser = useSelector((state: any) => state.user)
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
@@ -42,20 +45,27 @@ export default function Index() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.positionUpdate)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetPosition({ 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])
 
 
    function handleChooseData(id: string, name: string, active: boolean, group: string) {
@@ -115,14 +125,14 @@ export default function Index() {
                   <ButtonTab
                      active={active == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.push(`/position?active=true&group=${group}&search=${search}`) }}
+                     onPress={() => { router.replace(`/position?active=true&group=${group}&search=${search}`) }}
                      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(`/position?active=false&group=${group}&search=${search}`) }}
+                     onPress={() => { router.replace(`/position?active=false&group=${group}&search=${search}`) }}
                      label="Tidak Aktif"
                      icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
@@ -136,25 +146,32 @@ export default function Index() {
                }
                <View>
                   {
-                     data.length > 0 ?
-                        data.map((item, index) => {
+                     loading ?
+                        arrSkeleton.map((item, index) => {
                            return (
-                              <BorderBottomItem
-                                 key={index}
-                                 onPress={() => { handleChooseData(item.id, item.name, item.isActive, item.idGroup) }}
-                                 borderType="all"
-                                 icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                                    </View>
-                                 }
-                                 title={item.name}
-                                 subtitle={item.group}
-                              />
+                              <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={() => { handleChooseData(item.id, item.name, item.isActive, item.idGroup) }}
+                                    borderType="all"
+                                    icon={
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                          <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
+                                       </View>
+                                    }
+                                    title={item.name}
+                                    subtitle={item.group}
+                                 />
+                              )
+                           })
+                           :
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                   }
                </View>
             </View>