upd: skeleton

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

No Issues

app/(application)/discussion/member/[id].tsx

@@ -4,6 +4,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import MenuItemRow from "@/components/menuItemRow";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
@@ -28,28 +29,37 @@ export default function MemberDiscussionDetail() {
    const [isModal, setModal] = useState(false)
    const [chooseUser, setChooseUser] = useState({ idUser: '', name: '', img: '' })
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'anggota' })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
+   useEffect(() => {
+      handleLoad(false)
+   }, [update]);
+
 
    useEffect(() => {
-      handleLoad()
-   }, [update]);
+      handleLoad(true)
+   }, []);
 
    async function handleDeleteUser() {
       try {
          const hasil = await decryptToken(String(token?.current))
          await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
-         ToastAndroid.show("Berhasil mengelluarkan anggota dari diskusi", ToastAndroid.SHORT)
-         handleLoad()
+         ToastAndroid.show("Berhasil mengeluarkan anggota dari diskusi", ToastAndroid.SHORT)
+         handleLoad(false)
       } catch (error) {
          console.error(error)
       } finally {
@@ -84,22 +94,29 @@ export default function MemberDiscussionDetail() {
                      />
                   }
                   {
-                     data.map((item, index) => {
-                        return (
-                           <BorderBottomItem
-                              key={index}
-                              borderType="bottom"
-                              icon={
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                              }
-                              title={item.name}
-                              onPress={() => {
-                                 setChooseUser(item)
-                                 setModal(true)
-                              }}
-                           />
-                        )
-                     })
+                     loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <SkeletonTwoItem key={index} />
+                           )
+                        })
+                        :
+                        data.map((item, index) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                 }
+                                 title={item.name}
+                                 onPress={() => {
+                                    setChooseUser(item)
+                                    setModal(true)
+                                 }}
+                              />
+                           )
+                        })
                   }
                </View>
             </View>