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/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();
-   }, [selected, update.data]);
+      handleLoad(true)
+   }, [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) => (
-                           <EventItem
-                              key={index}
-                              category={index % 2 == 0 ? 'purple' : 'orange'}
-                              title={item.title}
-                              user={item.user_name}
-                              jamAwal={item.timeStart}
-                              jamAkhir={item.timeEnd}
-                              onPress={() => {
-                                 router.push(`./calendar/${item.id}`);
-                              }}
-                           />
-                        ))
-                     ) : (
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
-                     )}
+                     {
+                        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}
+                                    category={index % 2 == 0 ? 'purple' : 'orange'}
+                                    title={item.title}
+                                    user={item.user_name}
+                                    jamAwal={item.timeStart}
+                                    jamAkhir={item.timeEnd}
+                                    onPress={() => {
+                                       router.push(`./calendar/${item.id}`);
+                                    }}
+                                 />
+                              ))
+                           ) : (
+                              <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
+                           )
+                     }
                   </View>
                </View>
             </View>