upd: skeleton task divisi

Deskripsi:
- detail task divisi

No Issues

components/task/sectionMemberTask.tsx

@@ -12,6 +12,7 @@ import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import ImageUser from "../imageNew";
 import MenuItemRow from "../menuItemRow";
+import SkeletonTwoItem from "../skeletonTwoItem";
 
 type Props = {
    id: string;
@@ -29,13 +30,16 @@ export default function SectionMemberTask() {
    const [data, setData] = useState<Props[]>([]);
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
    const [memberChoose, setMemberChoose] = useState({
       id: "",
       name: "",
    });
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetTaskOne({
             id: detail,
@@ -45,13 +49,19 @@ export default function SectionMemberTask() {
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
    }, [update.member]);
 
+   useEffect(() => {
+      handleLoad(true);
+   }, [])
+
 
    async function handleDeleteMember() {
       try {
@@ -83,39 +93,48 @@ export default function SectionMemberTask() {
             </View>
 
             <View style={[Styles.wrapPaper]}>
-               {data.length > 0 ? (
-                  data.map((item, index) => {
-                     return (
-                        <BorderBottomItem
-                           key={index}
-                           borderType="bottom"
-                           icon={
-                              <ImageUser
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+               {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
+                        return (
+                           <SkeletonTwoItem key={index} />
+                        )
+                     })
+                     :
+                     data.length > 0 ? (
+                        data.map((item, index) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser
+                                       src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                    />
+                                 }
+                                 title={item.name}
+                                 onPress={() => {
+                                    setMemberChoose({
+                                       id: item.idUser,
+                                       name: item.name,
+                                    });
+                                    setModal(true);
+                                 }}
                               />
-                           }
-                           title={item.name}
-                           onPress={() => {
-                              setMemberChoose({
-                                 id: item.idUser,
-                                 name: item.name,
-                              });
-                              setModal(true);
-                           }}
-                        />
-                     );
-                  })
-               ) : (
-                  <Text
-                     style={[
-                        Styles.textDefault,
-                        Styles.cGray,
-                        { textAlign: "center" },
-                     ]}
-                  >
-                     Tidak ada anggota
-                  </Text>
-               )}
+                           );
+                        })
+                     ) : (
+                        <Text
+                           style={[
+                              Styles.textDefault,
+                              Styles.cGray,
+                              { textAlign: "center" },
+                           ]}
+                        >
+                           Tidak ada anggota
+                        </Text>
+                     )
+               }
             </View>
          </View>