upd: skeleton

Deskripsi:
- diskusi umum
- detail diskusi umum
- list pengumuman
- detail pengumuman
- list kegiatan
- detail kegiatan

No Issues

app/(application)/announcement/[id].tsx

@@ -1,9 +1,10 @@
 import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
 import ButtonBackHeader from "@/components/buttonBackHeader";
+import Skeleton from "@/components/skeleton";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign, Entypo, MaterialIcons } from "@expo/vector-icons";
+import { Entypo, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Dimensions, SafeAreaView, ScrollView, Text, View } from "react-native";
@@ -24,22 +25,31 @@ export default function DetailAnnouncement() {
    const update = useSelector((state: any) => state.announcementUpdate)
    const entityUser = useSelector((state: any) => state.user)
    const contentWidth = Dimensions.get('window').width
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetAnnouncementOne({ id: id, user: hasil })
          setData(response.data)
          setDataMember(response.member)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(false)
    }, [update])
 
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -53,37 +63,66 @@ export default function DetailAnnouncement() {
          <ScrollView>
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapPaper]}>
-                  <View style={Styles.rowItemsCenter}>
-                     <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
-                     <Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
-                  </View>
-                  <View style={[Styles.mt10]}>
-                     <RenderHTML
-                        contentWidth={contentWidth}
-                        source={{ html: data?.desc }}
-                     />
-                  </View>
+                  {
+                     loading ?
+                        <View>
+                           <View style={[Styles.rowOnly]}>
+                              <Skeleton width={30} height={30} borderRadius={10} />
+                              <View style={[{ flex: 1 }, Styles.ph05]}>
+                                 <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
+                              </View>
+                           </View>
+                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                        </View>
+                        :
+                        <>
+                           <View style={Styles.rowItemsCenter}>
+                              <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
+                              <Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
+                           </View>
+                           <View style={[Styles.mt10]}>
+                              <RenderHTML
+                                 contentWidth={contentWidth}
+                                 source={{ html: data?.desc }}
+                              />
+                           </View>
+                        </>
+                  }
+
                </View>
                <View style={[Styles.wrapPaper, Styles.mv15]}>
                   {
-                     Object.keys(dataMember).map((v: any, i: any) => {
-                        return (
-                           <View key={i} style={[Styles.mb05]}>
-                              <Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
-                              {
-                                 dataMember[v].map((item: any, x: any) => {
-                                    return (
-                                       <View key={x} style={[Styles.rowItemsCenter]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
-                                          <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
-                                       </View>
-                                    )
-                                 })
-                              }
+                     loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <View key={index}>
+                                 <Skeleton width={30} widthType="percent" height={10} borderRadius={10} />
+                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                              </View>
+                           )
+                        })
+                        :
+                        Object.keys(dataMember).map((v: any, i: any) => {
+                           return (
+                              <View key={i} style={[Styles.mb05]}>
+                                 <Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
+                                 {
+                                    dataMember[v].map((item: any, x: any) => {
+                                       return (
+                                          <View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
+                                             <Entypo name="dot-single" size={24} color="black" />
+                                             <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
+                                          </View>
+                                       )
+                                    })
+                                 }
 
-                           </View>
-                        )
-                     })
+                              </View>
+                           )
+                        })
                   }
                </View>
             </View>

app/(application)/announcement/index.tsx

@@ -2,6 +2,7 @@ import HeaderRightAnnouncementList from "@/components/announcement/headerAnnounc
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import InputSearch from "@/components/inputSearch";
+import SkeletonContent from "@/components/skeletonContent";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
@@ -26,20 +27,29 @@ export default function Announcement() {
    const [search, setSearch] = useState('')
    const entityUser = useSelector((state: any) => state.user)
    const update = useSelector((state: any) => state.announcementUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetAnnouncement({ user: hasil, search: search })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad()
-   }, [search, update])
+      handleLoad(false)
+   }, [update])
+
+   useEffect(() => {
+      handleLoad(true)
+   }, [search])
 
    return (
       <SafeAreaView>
@@ -56,27 +66,34 @@ export default function Announcement() {
             <View style={[Styles.p15, Styles.mb100]}>
                <InputSearch onChange={setSearch} />
                {
-                  data.length > 0
-                     ?
-                     data.map((item, index) => {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
                         return (
-                           <BorderBottomItem
-                              key={index}
-                              onPress={() => { router.push(`/announcement/${item.id}`) }}
-                              borderType="bottom"
-                              icon={
-                                 <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                    <MaterialIcons name="campaign" size={25} color={'#384288'} />
-                                 </View>
-                              }
-                              title={item.title}
-                              desc={item.desc.replace(/<[^>]*>?/gm, '')}
-                              rightTopInfo={item.createdAt}
-                           />
+                           <SkeletonContent key={index} />
                         )
                      })
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
+                     data.length > 0
+                        ?
+                        data.map((item, index) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => { router.push(`/announcement/${item.id}`) }}
+                                 borderType="bottom"
+                                 icon={
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                                    </View>
+                                 }
+                                 title={item.title}
+                                 desc={item.desc.replace(/<[^>]*>?/gm, '')}
+                                 rightTopInfo={item.createdAt}
+                              />
+                           )
+                        })
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
                }
             </View>
          </ScrollView>