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,36 +145,66 @@ 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} />
-                     <Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
+                     {
+                        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} />
-                     <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
+                     {
+                        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} />
-                     <Text style={[Styles.textDefault]}>
+                     {
-                        {
+                        loading ?
-                           data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                              data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
+                           :
-                                 data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
+                           <Text style={[Styles.textDefault]}>
-                                    data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
+                              {
-                                       data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
+                                 data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
-                                          ''
+                                    data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
-                        }
+                                       data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
-                     </Text>
+                                          data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
+                                             data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
+                                                ''
+                              }
+                           </Text>
+                     }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                      <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
-                     <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
+                     {
+                        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} />
-                     <Text style={[Styles.textDefault]}>{data?.desc}</Text>
+                     {
+                        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";
@@ -10,7 +11,7 @@ import { SafeAreaView, ScrollView, View } from "react-native";
 
 type Props = {
    dateStart: Date
-   year:string
+   year: string
    data: []
 }
 export default function CalendarHistory() {
@@ -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)} />
-               <ItemHistoryEvent data={data} />
+               {
+                  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,23 +142,31 @@ 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 ? (
+                     {
-                        data.map((item, index) => (
+                        loading ?
-                           <EventItem
+                           <>
-                              key={index}
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-                              category={index % 2 == 0 ? 'purple' : 'orange'}
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-                              title={item.title}
+                           </>
-                              user={item.user_name}
+                           :
-                              jamAwal={item.timeStart}
+                           data.length > 0 ? (
-                              jamAkhir={item.timeEnd}
+                              data.map((item, index) => (
-                              onPress={() => {
+                                 <EventItem
-                                 router.push(`./calendar/${item.id}`);
+                                    key={index}
-                              }}
+                                    category={index % 2 == 0 ? 'purple' : 'orange'}
-                           />
+                                    title={item.title}
-                        ))
+                                    user={item.user_name}
-                     ) : (
+                                    jamAwal={item.timeStart}
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
+                                    jamAkhir={item.timeEnd}
-                     )}
+                                    onPress={() => {
+                                       router.push(`./calendar/${item.id}`);
+                                    }}
+                                 />
+                              ))
+                           ) : (
+                              <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,64 +167,78 @@ export default function DiscussionDetail() {
          <View style={{ flex: 1 }}>
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <BorderBottomItem
+                  {
-                     descEllipsize={false}
+                     loading ?
-                     width={60}
+                        <SkeletonContent />
-                     borderType="bottom"
+                        :
-                     icon={
-                        <ImageUser
-                           src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
-                           size="sm"
-                        />
-                     }
-                     title={data?.username}
-                     subtitle={
-                        data?.isActive ? (
-                           data?.status == 1 ? (
-                              <LabelStatus category="success" text="BUKA" size="small" />
-                           ) : (
-                              <LabelStatus category="error" text="TUTUP" size="small" />
-                           )
-                        ) : (
-                           <LabelStatus category="secondary" text="ARSIP" size="small" />
-                        )
-                     }
-                     rightTopInfo={data?.createdAt}
-                     desc={data?.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]}
-                           >
-                              {dataComment.length} Komentar
-                           </Text>
-                        </View>
-                     }
-                  />
-                  <View style={[Styles.p15]}>
-                     {dataComment.map((item, index) => (
                         <BorderBottomItem
-                           key={index}
+                           descEllipsize={false}
-                           width={55}
+                           width={60}
                            borderType="bottom"
                            icon={
                               <ImageUser
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
-                                 size="xs"
+                                 size="sm"
                               />
                            }
-                           title={item.username}
+                           title={data?.username}
-                           rightTopInfo={item.createdAt}
+                           subtitle={
-                           desc={item.comment}
+                              data?.isActive ? (
-                           descEllipsize={false}
+                                 data?.status == 1 ? (
+                                    <LabelStatus category="success" text="BUKA" size="small" />
+                                 ) : (
+                                    <LabelStatus category="error" text="TUTUP" size="small" />
+                                 )
+                              ) : (
+                                 <LabelStatus category="secondary" text="ARSIP" size="small" />
+                              )
+                           }
+                           rightTopInfo={data?.createdAt}
+                           desc={data?.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]}
+                                 >
+                                    {dataComment.length} Komentar
+                                 </Text>
+                              </View>
+                           }
                         />
-                     ))}
+                  }
+
+                  <View style={[Styles.p15]}>
+                     {
+                        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}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser
+                                       src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                       size="xs"
+                                    />
+                                 }
+                                 title={item.username}
+                                 rightTopInfo={item.createdAt}
+                                 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,35 +80,44 @@ export default function DiscussionDivision() {
                </View>
                <InputSearch onChange={setSearch} />
                <View>
-                  {data.length > 0 ?
+                  {
-                     data.map((item, index) => (
+                     loading ?
-                        <BorderBottomItem
+                        arrSkeleton.map((item: any, i: number) => {
-                           key={index}
+                           return (
-                           width={55}
+                              <SkeletonContent key={i} />
-                           onPress={() => { router.push(`./discussion/${item.id}`) }}
+                           )
-                           borderType="bottom"
+                        })
-                           icon={
+                        :
-                              <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                        data.length > 0 ?
-                           }
+                           data.map((item, index) => (
-                           title={item.user_name}
+                              <BorderBottomItem
-                           subtitle={
+                                 key={index}
-                              active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
+                                 width={55}
-                           }
+                                 onPress={() => { router.push(`./discussion/${item.id}`) }}
-                           rightTopInfo={item.createdAt}
+                                 borderType="bottom"
-                           desc={item.desc}
+                                 icon={
-                           leftBottomInfo={
+                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                              <View style={[Styles.rowItemsCenter]}>
+                                 }
-                                 <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                 title={item.user_name}
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                 subtitle={
-                              </View>
+                                    active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
-                           }
+                                 }
-                           rightBottomInfo={item.total_komentar + ' Komentar'}
+                                 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.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
+                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                     )}
+                                    </View>
+                                 }
+                                 rightBottomInfo={item.total_komentar + ' Komentar'}
+                              />
+                           ))
+                           :
+                           (
+                              <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,74 +149,87 @@ 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>
+                           <View>
-                     {data.map((item, index) => (
+                              {data.map((item, index) => (
-                        <BorderBottomItem
+                                 <BorderBottomItem
-                           key={index}
+                                    key={index}
-                           onPress={() => {
+                                    onPress={() => {
-                              router.push(`./task/${item.id}`);
+                                       router.push(`./task/${item.id}`);
-                           }}
+                                    }}
-                           borderType="bottom"
+                                    borderType="bottom"
-                           icon={
+                                    icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <AntDesign name="areachart" size={25} color={"#384288"} />
+                                          <AntDesign name="areachart" size={25} color={"#384288"} />
-                              </View>
+                                       </View>
-                           }
+                                    }
-                           title={item.title}
+                                    title={item.title}
-                        />
+                                 />
-                     ))}
+                              ))}
-                  </View>
-               ) : (
-                  <View>
-                     {data.map((item, index) => (
-                        <PaperGridContent
-                           key={index}
-                           onPress={() => {
-                              router.push(`./task/${item.id}`);
-                           }}
-                           content="page"
-                           title={item.title}
-                           headerColor="primary"
-                        >
-                           <ProgressBar category="page" value={item.progress} />
-                           <View style={[Styles.rowSpaceBetween]}>
-                              <Text></Text>
-                              <LabelStatus
-                                 size="default"
-                                 category={
-                                    item.status === 0 ? 'primary' :
-                                       item.status === 1 ? 'warning' :
-                                          item.status === 2 ? 'success' :
-                                             item.status === 3 ? 'error' :
-                                                'primary'
-                                 }
-                                 text={
-                                    item.status === 0 ? 'SEGERA' :
-                                       item.status === 1 ? 'DIKERJAKAN' :
-                                          item.status === 2 ? 'SELESAI' :
-                                             item.status === 3 ? 'DIBATALKAN' :
-                                                'SEGERA'
-                                 }
-                              />
                            </View>
-                        </PaperGridContent>
+                        ) : (
-                     ))}
+                           <View>
-                  </View>
+                              {data.map((item, index) => (
-               )}
+                                 <PaperGridContent
+                                    key={index}
+                                    onPress={() => {
+                                       router.push(`./task/${item.id}`);
+                                    }}
+                                    content="page"
+                                    title={item.title}
+                                    headerColor="primary"
+                                 >
+                                    <ProgressBar category="page" value={item.progress} />
+                                    <View style={[Styles.rowSpaceBetween]}>
+                                       <Text></Text>
+                                       <LabelStatus
+                                          size="default"
+                                          category={
+                                             item.status === 0 ? 'primary' :
+                                                item.status === 1 ? 'warning' :
+                                                   item.status === 2 ? 'success' :
+                                                      item.status === 3 ? 'error' :
+                                                         'primary'
+                                          }
+                                          text={
+                                             item.status === 0 ? 'SEGERA' :
+                                                item.status === 1 ? 'DIKERJAKAN' :
+                                                   item.status === 2 ? 'SELESAI' :
+                                                      item.status === 3 ? 'DIBATALKAN' :
+                                                         'SEGERA'
+                                          }
+                                       />
+                                    </View>
+                                 </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)
@@ -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) => {
+                        loading ?
-                           return (
+                           arrSkeleton.map((item, index) => {
-                              <BorderBottomItem
+                              return (
-                                 width={55}
+                                 <SkeletonTwoItem key={index} />
-                                 key={index}
+                              )
-                                 borderType="bottom"
+                           })
-                                 onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
+                           :
-                                 icon={
+                           dataMember.map((item, index) => {
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                              return (
-                                 }
+                                 <BorderBottomItem
-                                 title={item.name}
+                                    width={55}
-                                 rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
+                                    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>

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,47 +173,57 @@ export default function ListDivision() {
                   )}
 
                {
-                  data.length == 0 ? (
+                  loading ?
-                     <View style={[Styles.mt15]}>
+                     isList ?
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                        arrSkeleton.map((item, index) => (
-                     </View>
+                           <SkeletonTwoItem key={index} />
-                  ) : (
+                        ))
-                     isList ? (
+                        :
-                        <View>
+                        arrSkeleton.map((item, index) => (
-                           {data.map((item, index) => (
+                           <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
-                              <BorderBottomItem
+                        ))
-                                 key={index}
+                     :
-                                 onPress={() => { }}
+                     data.length == 0 ? (
-                                 borderType="bottom"
+                        <View style={[Styles.mt15]}>
-                                 icon={
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialIcons name="group" size={25} color={"#384288"} />
-                                    </View>
-                                 }
-                                 title={item.name}
-                                 titleWeight="normal"
-                              />
-                           ))}
                         </View>
                      ) : (
-                        <View>
+                        isList ? (
-                           {data.map((item, index) => (
+                           <View>
-                              <PaperGridContent
+                              {data.map((item, index) => (
-                                 key={index}
+                                 <BorderBottomItem
-                                 onPress={() => {
+                                    key={index}
-                                    router.push(`/division/${item.id}`);
+                                    onPress={() => { }}
-                                 }}
+                                    borderType="bottom"
-                                 content="page"
+                                    icon={
-                                 title={item.name}
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 headerColor="primary"
+                                          <MaterialIcons name="group" size={25} color={"#384288"} />
-                                 contentPosition="top"
+                                       </View>
-                              >
+                                    }
-                                 <Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
+                                    title={item.name}
-                              </PaperGridContent>
+                                    titleWeight="normal"
-                           ))}
+                                 />
-                        </View>
+                              ))}
+                           </View>
+                        ) : (
+                           <View>
+                              {data.map((item, index) => (
+                                 <PaperGridContent
+                                    key={index}
+                                    onPress={() => {
+                                       router.push(`/division/${item.id}`);
+                                    }}
+                                    content="page"
+                                    title={item.name}
+                                    headerColor="primary"
+                                    contentPosition="top"
+                                 >
+                                    <Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
+                                 </PaperGridContent>
+                              ))}
+                           </View>
+                        )
                      )
-                  )
                }
             </View>
          </ScrollView>

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,25 +45,34 @@ export default function DiscussionDivisionDetail() {
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
       <View style={[Styles.wrapPaper]}>
-        {data.length > 0 ? (
+
-          data.map((item, index) => (
+        {
-            <DiscussionItem
+          loading ?
-              key={index}
+            <>
-              title={item.desc}
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-              user={item.user}
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-              date={item.date}
+            </>
-              onPress={() => {
+            :
-                router.push(`/division/${id}/discussion/${item.id}`);
+            data.length > 0 ? (
-              }}
+              data.map((item, index) => (
-            />
+                <DiscussionItem
-          ))
+                  key={index}
-        ) : (
+                  title={item.desc}
-          <Text
+                  user={item.user}
-            style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
+                  date={item.date}
-          >
+                  onPress={() => {
-            Tidak ada diskusi
+                    router.push(`/division/${id}/discussion/${item.id}`);
-          </Text>
+                  }}
-        )}
+                />
+              ))
+            ) : (
+              <Text
+                style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
+              >
+                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,40 +45,47 @@ export default function FileDivisionDetail() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
          {
-            data.length > 0 ?
+            loading ?
-               <Carousel
+               <View style={[Styles.rowSpaceBetween]}>
-                  ref={ref}
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-                  width={width}
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-                  height={115}
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-                  data={data}
+               </View>
-                  loop={true}
-                  autoPlay={false}
-                  autoPlayReverse={false}
-                  pagingEnabled={true}
-                  snapEnabled={true}
-                  vertical={false}
-                  style={{
-                     width: width,
-                  }}
-                  mode="parallax"
-                  modeConfig={{
-                     parallaxScrollingScale: 1,
-                     parallaxScrollingOffset: 280,
-                  }}
-                  renderItem={({ index }) => (
-                     <View style={{ margin: 'auto', width: '28%' }}>
-                        <View style={{ alignItems: 'center' }}>
-                           <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                              <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-                           </View>
-                        </View>
-                        <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
-                     </View>
-
-                  )}
-               />
                :
-               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+               data.length > 0 ?
+                  <Carousel
+                     ref={ref}
+                     width={width}
+                     height={115}
+                     data={data}
+                     loop={true}
+                     autoPlay={false}
+                     autoPlayReverse={false}
+                     pagingEnabled={true}
+                     snapEnabled={true}
+                     vertical={false}
+                     style={{
+                        width: width,
+                     }}
+                     mode="parallax"
+                     modeConfig={{
+                        parallaxScrollingScale: 1,
+                        parallaxScrollingOffset: 280,
+                     }}
+                     renderItem={({ index }) => (
+                        <View style={{ margin: 'auto', width: '28%' }}>
+                           <View style={{ alignItems: 'center' }}>
+                              <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
+                                 <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
+                              </View>
+                           </View>
+                           <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                        </View>
+
+                     )}
+                  />
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
          }
       </View>
    )

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,32 +45,36 @@ export default function TaskDivisionDetail() {
    return (
       <View>
          <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
+
          {
-            data.length > 0 ?
+            loading ?
-               <Carousel
+               <Skeleton width={100} widthType="percent" height={60} borderRadius={10} />
-                  ref={ref}
-                  style={{ width: "100%" }}
-                  width={width * 0.8}
-                  height={100}
-                  data={data}
-                  loop={true}
-                  autoPlay={false}
-                  autoPlayReverse={false}
-                  pagingEnabled={true}
-                  snapEnabled={true}
-                  vertical={false}
-                  renderItem={({ index }) => (
-                     <View style={[Styles.wrapPaper, { width: '95%' }]}>
-                        <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
-                        <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                           <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
-                           <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
-                        </View>
-                     </View>
-                  )}
-               />
                :
-               <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+               data.length > 0 ?
+                  <Carousel
+                     ref={ref}
+                     style={{ width: "100%" }}
+                     width={width * 0.8}
+                     height={100}
+                     data={data}
+                     loop={true}
+                     autoPlay={false}
+                     autoPlayReverse={false}
+                     pagingEnabled={true}
+                     snapEnabled={true}
+                     vertical={false}
+                     renderItem={({ index }) => (
+                        <View style={[Styles.wrapPaper, { width: '95%' }]}>
+                           <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
+                           <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                              <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
+                              <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
+                           </View>
+                        </View>
+                     )}
+                  />
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
          }
       </View>
    )