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]/(fitur-division)/calendar/[detail]/add-member.tsx

@@ -144,6 +144,7 @@ export default function AddMemberCalendarEvent() {
                               style={[Styles.itemSelectModal]}
                               onPress={() => {
                                  !found && onChoose(item.idUser, item.name, item.img)
+                                 onChoose(item.idUser, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter]}>

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx

@@ -5,6 +5,7 @@ import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetai
 import DrawerBottom from "@/components/drawerBottom"
 import ImageUser from "@/components/imageNew"
 import MenuItemRow from "@/components/menuItemRow"
+import Skeleton from "@/components/skeleton"
 import Styles from "@/constants/Styles"
 import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
@@ -49,6 +50,8 @@ export default function DetailEventCalendar() {
    const dispatch = useDispatch()
    const entityUser = useSelector((state: any) => state.user);
    const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
 
    async function handleCheckMember() {
       try {
@@ -67,6 +70,7 @@ export default function DetailEventCalendar() {
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetCalendarOne({
             user: hasil,
@@ -76,6 +80,8 @@ export default function DetailEventCalendar() {
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -131,7 +137,7 @@ export default function DetailEventCalendar() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Detail Acara',
                headerTitleAlign: 'center',
-               headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} />
+               headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
             }}
          />
          <ScrollView>
@@ -139,18 +145,37 @@ export default function DetailEventCalendar() {
                <View style={[Styles.wrapPaper, Styles.mb15]}>
                   <View style={Styles.rowItemsCenter}>
                      <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
-                     <Text style={[Styles.textDefault]}>{data?.title}</Text>
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           : <Text style={[Styles.textDefault]}>{data?.title}</Text>
+                     }
+
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
                            <Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
+                     }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
                            <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
+                     }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
                            <Text style={[Styles.textDefault]}>
                               {
                                  data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
@@ -161,14 +186,25 @@ export default function DetailEventCalendar() {
                                                 ''
                               }
                            </Text>
+                     }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
                            <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
+                     }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
                            <Text style={[Styles.textDefault]}>{data?.desc}</Text>
+                     }
                   </View>
                </View>
 

app/(application)/division/[id]/(fitur-division)/calendar/history.tsx

@@ -1,6 +1,7 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
 import InputSearch from "@/components/inputSearch";
+import Skeleton from "@/components/skeleton";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarHistory } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -18,14 +19,19 @@ export default function CalendarHistory() {
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -45,7 +51,15 @@ export default function CalendarHistory() {
          <ScrollView>
             <View style={[Styles.p15]}>
                <InputSearch onChange={(val) => setSearch(val)} />
+               {
+                  loading ?
+                     arrSkeleton.map((item, index) => (
+                        <Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
+                     ))
+                     :
                      <ItemHistoryEvent data={data} />
+               }
+
             </View>
          </ScrollView>
       </SafeAreaView>

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -2,6 +2,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
 import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
 import EventItem from "@/components/eventItem";
+import Skeleton from "@/components/skeleton";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -15,7 +16,7 @@ import Datepicker, {
    CalendarComponents,
    CalendarDay
 } from "react-native-ui-datepicker";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 type Props = {
    id: string;
@@ -38,10 +39,12 @@ export default function CalendarDivision() {
    const [dataIndicator, setDataIndicator] = useState<any>([]);
    const [month, setMonth] = useState<number>(new Date().getMonth());
    const update = useSelector((state: any) => state.calendarUpdate)
+   const [loading, setLoading] = useState(true)
 
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetCalendarByDateDivision({
             user: hasil,
@@ -51,6 +54,8 @@ export default function CalendarDivision() {
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -70,8 +75,12 @@ export default function CalendarDivision() {
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(true)
-   }, [selected, update.data]);
+   }, [selected])
+
+   useEffect(() => {
+      handleLoad(false);
+   }, [update.data]);
 
    useEffect(() => {
       handleLoadIndicator();
@@ -133,7 +142,14 @@ export default function CalendarDivision() {
                <View style={[Styles.mb15, Styles.mt15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
                   <View style={[Styles.wrapPaper]}>
-                     {data.length > 0 ? (
+                     {
+                        loading ?
+                           <>
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                           </>
+                           :
+                           data.length > 0 ? (
                               data.map((item, index) => (
                                  <EventItem
                                     key={index}
@@ -149,7 +165,8 @@ export default function CalendarDivision() {
                               ))
                            ) : (
                               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
-                     )}
+                           )
+                     }
                   </View>
                </View>
             </View>

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx

@@ -4,6 +4,8 @@ import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussio
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
 import LabelStatus from "@/components/labelStatus";
+import Skeleton from "@/components/skeleton";
+import SkeletonContent from "@/components/skeletonContent";
 import Styles from "@/constants/Styles";
 import {
    apiGetDiscussionOne,
@@ -50,9 +52,13 @@ export default function DiscussionDetail() {
    const [isMemberDivision, setIsMemberDivision] = useState(false);
    const [isAdminDivision, setIsAdminDivision] = useState(false);
    const [isCreator, setIsCreator] = useState(false);
+   const [loading, setLoading] = useState(true)
+   const [loadingKomentar, setLoadingKomentar] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDiscussionOne({
             id: detail,
@@ -63,11 +69,14 @@ export default function DiscussionDetail() {
          setIsCreator(response.data.createdBy == hasil);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
-   async function handleLoadComment() {
+   async function handleLoadComment(loading: boolean) {
       try {
+         setLoadingKomentar(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDiscussionOne({
             id: detail,
@@ -77,6 +86,8 @@ export default function DiscussionDetail() {
          setDataComment(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoadingKomentar(false)
       }
    }
 
@@ -102,11 +113,12 @@ export default function DiscussionDetail() {
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
    }, [update.data]);
 
    useEffect(() => {
-      handleLoadComment();
+      handleLoad(true)
+      handleLoadComment(true);
       handleCheckMember();
    }, []);
 
@@ -120,7 +132,7 @@ export default function DiscussionDetail() {
          });
          if (response.success) {
             setKomentar("");
-            handleLoadComment();
+            handleLoadComment(false);
          }
       } catch (error) {
          console.error(error);
@@ -155,6 +167,10 @@ export default function DiscussionDetail() {
          <View style={{ flex: 1 }}>
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
+                  {
+                     loading ?
+                        <SkeletonContent />
+                        :
                         <BorderBottomItem
                            descEllipsize={false}
                            width={60}
@@ -195,8 +211,16 @@ export default function DiscussionDetail() {
                               </View>
                            }
                         />
+                  }
+
                   <View style={[Styles.p15]}>
-                     {dataComment.map((item, index) => (
+                     {
+                        loadingKomentar ?
+                           arrSkeleton.map((item, index) => (
+                              <Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
+                           ))
+                           :
+                           dataComment.map((item, index) => (
                               <BorderBottomItem
                                  key={index}
                                  width={55}
@@ -212,7 +236,9 @@ export default function DiscussionDetail() {
                                  desc={item.comment}
                                  descEllipsize={false}
                               />
-                     ))}
+                           ))
+                     }
+
                   </View>
                </View>
             </ScrollView>

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -3,8 +3,9 @@ import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
+import SkeletonContent from "@/components/skeletonContent";
 import Styles from "@/constants/Styles";
-import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
+import { apiGetDiscussion } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
@@ -32,21 +33,30 @@ export default function DiscussionDivision() {
    const { token, decryptToken } = useAuthSession()
    const [search, setSearch] = useState('')
    const update = useSelector((state: any) => state.discussionUpdate);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDiscussion({ user: hasil, search, division: id, active })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
+   useEffect(() => {
+      handleLoad(false)
+   }, [update.data])
+
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(true)
-   }, [active, search, update.data])
+   }, [active, search])
 
    return (
       <SafeAreaView>
@@ -70,7 +80,15 @@ export default function DiscussionDivision() {
                </View>
                <InputSearch onChange={setSearch} />
                <View>
-                  {data.length > 0 ?
+                  {
+                     loading ?
+                        arrSkeleton.map((item: any, i: number) => {
+                           return (
+                              <SkeletonContent key={i} />
+                           )
+                        })
+                        :
+                        data.length > 0 ?
                            data.map((item, index) => (
                               <BorderBottomItem
                                  key={index}
@@ -98,7 +116,8 @@ export default function DiscussionDivision() {
                            :
                            (
                               <Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
-                     )}
+                           )
+                  }
                </View>
             </View>
          </ScrollView>

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -4,6 +4,8 @@ import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import PaperGridContent from "@/components/paperGridContent";
 import ProgressBar from "@/components/progressBar";
+import Skeleton from "@/components/skeleton";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetTask } from "@/lib/api";
@@ -34,9 +36,12 @@ export default function ListTask() {
    const [data, setData] = useState<Props[]>([]);
    const [search, setSearch] = useState("");
    const update = useSelector((state: any) => state.taskUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetTask({
             user: hasil,
@@ -47,12 +52,18 @@ export default function ListTask() {
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false)
-   }, [status, search, update.data]);
+   }, [update.data])
+
+   useEffect(() => {
+      handleLoad(true);
+   }, [status, search]);
 
    return (
       <SafeAreaView>
@@ -138,20 +149,20 @@ export default function ListTask() {
                      />
                   </Pressable>
                </View>
-               {data.length > 0 ? (
+               {
-                  <></>
+
-               ) : (
+                  loading ?
-                  <Text
+                     isList ?
-                     style={[
+                        arrSkeleton.map((item, index) => (
-                        Styles.textDefault,
+                           <SkeletonTwoItem key={index} />
-                        Styles.cGray,
+                        ))
-                        { textAlign: "center" },
+                        :
-                     ]}
+                        arrSkeleton.map((item, index) => (
-                  >
+                           <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
-                     Tidak ada data
+                        ))
-                  </Text>
+                     :
-               )}
+                     data.length > 0 ? (
-               {isList ? (
+                        isList ? (
                            <View>
                               {data.map((item, index) => (
                                  <BorderBottomItem
@@ -205,7 +216,20 @@ export default function ListTask() {
                                  </PaperGridContent>
                               ))}
                            </View>
-               )}
+                        )
+                     ) : (
+                        <Text
+                           style={[
+                              Styles.textDefault,
+                              Styles.cGray,
+                              { textAlign: "center" },
+                           ]}
+                        >
+                           Tidak ada data
+                        </Text>
+                     )
+
+               }
             </View>
          </ScrollView>
       </SafeAreaView>

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)
@@ -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]}>
+                     {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,6 +172,13 @@ export default function InformationDivision() {
                      }
 
                      {
+                        loading ?
+                           arrSkeleton.map((item, index) => {
+                              return (
+                                 <SkeletonTwoItem key={index} />
+                              )
+                           })
+                           :
                            dataMember.map((item, index) => {
                               return (
                                  <BorderBottomItem

app/(application)/division/index.tsx

@@ -2,6 +2,8 @@ import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import InputSearch from "@/components/inputSearch";
 import PaperGridContent from "@/components/paperGridContent";
+import Skeleton from "@/components/skeleton";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDivision } from "@/lib/api";
@@ -38,9 +40,12 @@ export default function ListDivision() {
    const [nameGroup, setNameGroup] = useState("");
    const [data, setData] = useState<Props[]>([]);
    const update = useSelector((state: any) => state.divisionUpdate)
+   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
+   const [loading, setLoading] = useState(false)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDivision({
             user: hasil,
@@ -56,12 +61,18 @@ export default function ListDivision() {
          }
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
-   }, [active, search, group, cat, update]);
+   }, [update]);
+
+   useEffect(() => {
+      handleLoad(true);
+   }, [active, search, group, cat]);
 
    return (
       <SafeAreaView>
@@ -162,6 +173,16 @@ export default function ListDivision() {
                   )}
 
                {
+                  loading ?
+                     isList ?
+                        arrSkeleton.map((item, index) => (
+                           <SkeletonTwoItem key={index} />
+                        ))
+                        :
+                        arrSkeleton.map((item, index) => (
+                           <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
+                        ))
+                     :
                      data.length == 0 ? (
                         <View style={[Styles.mt15]}>
                            <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>

components/calendar/headerCalendarDetail.tsx

@@ -13,10 +13,11 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 type Props = {
-   id: string | string[]
+   id: string | string[],
+   idReminder?: string
 }
 
-export default function HeaderRightCalendarDetail({ id }: Props) {
+export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.calendarUpdate)
@@ -51,7 +52,7 @@ export default function HeaderRightCalendarDetail({ id }: Props) {
                   title="Tambah Anggota"
                   onPress={() => {
                      setVisible(false)
-                     router.push(`./${id}/add-member`)
+                     router.push(`./${idReminder}/add-member`)
                   }}
                />
                <MenuItemRow

components/division/discussionDivisionDetail.tsx

@@ -5,6 +5,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
 import DiscussionItem from "../discussionItem";
+import Skeleton from "../skeleton";
 
 type Props = {
   id: string;
@@ -18,9 +19,11 @@ export default function DiscussionDivisionDetail() {
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
+  const [loading, setLoading] = useState(true)
 
   async function handleLoad() {
     try {
+      setLoading(true)
       const hasil = await decryptToken(String(token?.current));
       const response = await apiGetDivisionOneFeature({
         user: hasil,
@@ -30,6 +33,8 @@ export default function DiscussionDivisionDetail() {
       setData(response.data);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -40,7 +45,15 @@ export default function DiscussionDivisionDetail() {
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
       <View style={[Styles.wrapPaper]}>
-        {data.length > 0 ? (
+
+        {
+          loading ?
+            <>
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+            </>
+            :
+            data.length > 0 ? (
               data.map((item, index) => (
                 <DiscussionItem
                   key={index}
@@ -58,7 +71,8 @@ export default function DiscussionDivisionDetail() {
               >
                 Tidak ada diskusi
               </Text>
-        )}
+            )
+        }
       </View>
     </View>
   );

components/division/fileDivisionDetail.tsx

@@ -1,11 +1,12 @@
 import Styles from "@/constants/Styles";
+import { apiGetDivisionOneFeature } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Feather } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
-import { useAuthSession } from "@/providers/AuthProvider";
+import Skeleton from "../skeleton";
-import { useLocalSearchParams } from "expo-router";
-import { apiGetDivisionOneFeature } from "@/lib/api";
 
 type Props = {
    id: string
@@ -21,14 +22,18 @@ export default function FileDivisionDetail() {
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -40,6 +45,13 @@ export default function FileDivisionDetail() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
          {
+            loading ?
+               <View style={[Styles.rowSpaceBetween]}>
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
+               </View>
+               :
                data.length > 0 ?
                   <Carousel
                      ref={ref}

components/division/taskDivisionDetail.tsx

@@ -6,6 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -22,14 +23,18 @@ export default function TaskDivisionDetail() {
    const [data, setData] = useState<Props[]>([])
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
+   const [loading, setLoading] = useState(true)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'today-task' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -40,7 +45,11 @@ export default function TaskDivisionDetail() {
    return (
       <View>
          <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
+
          {
+            loading ?
+               <Skeleton width={100} widthType="percent" height={60} borderRadius={10} />
+               :
                data.length > 0 ?
                   <Carousel
                      ref={ref}