upd: skeleton

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

No Issues

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>