upd: skeleton

Deskripsi:
- diskusi umum
- detail diskusi umum
- list pengumuman
- detail pengumuman
- list kegiatan
- detail kegiatan

No Issues

components/project/sectionMember.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;
@@ -30,14 +31,17 @@ export default function SectionMember({ status }: { status: number | undefined }
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props[]>([]);
+   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 apiGetProjectOne({
             user: hasil,
@@ -47,13 +51,19 @@ export default function SectionMember({ status }: { status: number | undefined }
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
    }, [update.member]);
 
+   useEffect(() => {
+      handleLoad(true);
+   }, []);
+
    async function handleDeleteMember() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -81,28 +91,35 @@ export default function SectionMember({ status }: { status: number | undefined }
 
             <View style={[Styles.wrapPaper]}>
                {
-                  data.length > 0
-                     ?
-                     data.map((item, index) => {
+                  loading ?
+                     arrSkeleton.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={() => {
-                                 if (status == 3) return
-                                 setMemberChoose({
-                                    id: item.idUser,
-                                    name: item.name,
-                                 })
-                                 setModal(true);
-                              }}
-                           />
-                        );
+                           <SkeletonTwoItem key={index} />
+                        )
                      })
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada anggota</Text>
+                     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={() => {
+                                    if (status == 3) return
+                                    setMemberChoose({
+                                       id: item.idUser,
+                                       name: item.name,
+                                    })
+                                    setModal(true);
+                                 }}
+                              />
+                           );
+                        })
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada anggota</Text>
                }
             </View>
          </View>