upd: skeleton

Deskripsi:
- divisi
- detail divisi
- informasi divisi
- calender list
- calender detail
- history
- diskusi list
- detail diskusi
- list task divisi

NO Issuese

app/(application)/division/[id]/info.tsx

@@ -5,6 +5,8 @@ import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
 import DrawerBottom from "@/components/drawerBottom"
 import ImageUser from "@/components/imageNew"
 import SectionCancel from "@/components/sectionCancel"
+import Skeleton from "@/components/skeleton"
+import SkeletonTwoItem from "@/components/skeletonTwoItem"
 import { ColorsStatus } from "@/constants/ColorsStatus"
 import Styles from "@/constants/Styles"
 import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
@@ -41,6 +43,8 @@ export default function InformationDivision() {
    const [dataMember, setDataMember] = useState<PropsMember[]>([])
    const [refresh, setRefresh] = useState(false)
    const update = useSelector((state: any) => state.divisionUpdate)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [loading, setLoading] = useState(true)
    const [dataMemberChoose, setDataMemberChoose] = useState({
       id: '',
       name: '',
@@ -91,21 +95,28 @@ export default function InformationDivision() {
       }
    }
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneDetail({ user: hasil, id })
          setDataDetail(response.data.division)
          setDataMember(response.data.member)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(false)
    }, [refresh, update])
 
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
    function handleChooseMember(item: PropsMember) {
       setDataMemberChoose(item)
       setModal(true)
@@ -118,7 +129,7 @@ export default function InformationDivision() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Informasi Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive}/>,
+               headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />,
             }}
          />
          <ScrollView>
@@ -131,7 +142,15 @@ export default function InformationDivision() {
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
                   <View style={[Styles.wrapPaper]}>
-                     <Text>{dataDetail?.desc}</Text>
+                     {loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <Skeleton key={index} width={100} height={10} widthType="percent" borderRadius={10} />
+                           )
+                        })
+                        :
+                        <Text>{dataDetail?.desc}</Text>
+                     }
                   </View>
                </View>
                <View style={[Styles.mb15]}>
@@ -153,21 +172,28 @@ export default function InformationDivision() {
                      }
 
                      {
-                        dataMember.map((item, index) => {
-                           return (
-                              <BorderBottomItem
-                                 width={55}
-                                 key={index}
-                                 borderType="bottom"
-                                 onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
-                                 icon={
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                                 }
-                                 title={item.name}
-                                 rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
-                              />
-                           )
-                        })
+                        loading ?
+                           arrSkeleton.map((item, index) => {
+                              return (
+                                 <SkeletonTwoItem key={index} />
+                              )
+                           })
+                           :
+                           dataMember.map((item, index) => {
+                              return (
+                                 <BorderBottomItem
+                                    width={55}
+                                    key={index}
+                                    borderType="bottom"
+                                    onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
+                                    icon={
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                    }
+                                    title={item.name}
+                                    rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
+                                 />
+                              )
+                           })
                      }
                   </View>
                </View>