upd: skeleton

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

No Issues

app/(application)/discussion/index.tsx

@@ -2,6 +2,7 @@ import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
+import SkeletonContent from "@/components/skeletonContent";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
@@ -30,21 +31,30 @@ export default function Discussion() {
    const [nameGroup, setNameGroup] = useState('')
    const [data, setData] = useState<Props[]>([])
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   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 apiGetDiscussionGeneral({ 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])
 
    return (
       <SafeAreaView>
@@ -75,37 +85,45 @@ export default function Discussion() {
                }
                <View>
                   {
-                     data.length > 0
-                        ?
-                        data.map((item: any, i: number) => {
+                     loading ?
+                        arrSkeleton.map((item: any, i: number) => {
                            return (
-                              <BorderBottomItem
-                                 key={i}
-                                 onPress={() => { router.push(`/discussion/${item.id}`) }}
-                                 borderType="bottom"
-                                 icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialIcons name="chat" size={25} color={'#384288'} />
-                                    </View>
-                                 }
-                                 title={item.title}
-                                 subtitle={
-                                    active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
-                                 }
-                                 rightTopInfo={item.createdAt}
-                                 desc={item.desc}
-                                 leftBottomInfo={
-                                    <View style={[Styles.rowItemsCenter]}>
-                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                                    </View>
-                                 }
-                                 rightBottomInfo={`${item.total_komentar} Komentar`}
-                              />
+                              <SkeletonContent key={i} />
                            )
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                        data.length > 0
+                           ?
+                           data.map((item: any, i: number) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={i}
+                                    onPress={() => { router.push(`/discussion/${item.id}`) }}
+                                    borderType="bottom"
+                                    icon={
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                          <MaterialIcons name="chat" size={25} color={'#384288'} />
+                                       </View>
+                                    }
+                                    title={item.title}
+                                    subtitle={
+                                       active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
+                                    }
+                                    rightTopInfo={item.createdAt}
+                                    desc={item.desc}
+                                    leftBottomInfo={
+                                       <View style={[Styles.rowItemsCenter]}>
+                                          <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                          <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                       </View>
+                                    }
+                                    rightBottomInfo={`${item.total_komentar} Komentar`}
+                                   
+                                 />
+                              )
+                           })
+                           :
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
                   }
                </View>
             </View>