upd: skeleton task divisi

Deskripsi:
- detail task divisi

No Issues

components/task/sectionTanggalTugasTask.tsx

@@ -12,6 +12,7 @@ import DrawerBottom from "../drawerBottom";
 import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
 import MenuItemRow from "../menuItemRow";
 import ModalSelect from "../modalSelect";
+import SkeletonTask from "../skeletonTask";
 
 
 type Props = {
@@ -28,6 +29,8 @@ export default function SectionTanggalTugasTask() {
    const [isModal, setModal] = useState(false)
    const [isSelect, setSelect] = useState(false)
    const { token, decryptToken } = useAuthSession()
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const [data, setData] = useState<Props[]>([])
    const [tugas, setTugas] = useState({
@@ -35,13 +38,16 @@ export default function SectionTanggalTugasTask() {
       status: 0,
    })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetTaskOne({ id: detail, user: hasil, cat: 'task' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -68,10 +74,15 @@ export default function SectionTanggalTugasTask() {
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(false)
    }, [update.task])
 
 
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
+
    async function handleDelete() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -100,28 +111,35 @@ export default function SectionTanggalTugasTask() {
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
             <View style={[Styles.wrapPaper]}>
                {
-                  data.length > 0
-                     ?
-                     data.map((item, index) => {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
                         return (
-                           <ItemSectionTanggalTugas
-                              key={index}
-                              done={item.status === 1}
-                              title={item.title}
-                              dateStart={item.dateStart}
-                              dateEnd={item.dateEnd}
-                              onPress={() => {
-                                 setTugas({
-                                    id: item.id,
-                                    status: item.status
-                                 })
-                                 setModal(true)
-                              }}
-                           />
-                        );
+                           <SkeletonTask key={index} />
+                        )
                      })
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+                     data.length > 0
+                        ?
+                        data.map((item, index) => {
+                           return (
+                              <ItemSectionTanggalTugas
+                                 key={index}
+                                 done={item.status === 1}
+                                 title={item.title}
+                                 dateStart={item.dateStart}
+                                 dateEnd={item.dateEnd}
+                                 onPress={() => {
+                                    setTugas({
+                                       id: item.id,
+                                       status: item.status
+                                    })
+                                    setModal(true)
+                                 }}
+                              />
+                           );
+                        })
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
                }
             </View>
          </View>