upd: skeleton

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

No Issues

components/project/sectionFile.tsx

@@ -14,6 +14,7 @@ import AlertKonfirmasi from "../alertKonfirmasi";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
+import Skeleton from "../skeleton";
 
 
 type Props = {
@@ -32,9 +33,12 @@ export default function SectionFile({ status, member }: { status: number | undef
    const update = useSelector((state: any) => state.projectUpdate)
    const [idSelect, setIdSelect] = useState('')
    const dispatch = useDispatch()
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetProjectOne({
             user: hasil,
@@ -44,13 +48,20 @@ export default function SectionFile({ status, member }: { status: number | undef
          setData(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
    useEffect(() => {
-      handleLoad();
+      handleLoad(false);
    }, [update.file]);
 
+
+   useEffect(() => {
+      handleLoad(true);
+   }, []);
+
    async function handleDelete() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -141,21 +152,28 @@ export default function SectionFile({ status, member }: { status: number | undef
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
             <View style={[Styles.wrapPaper]}>
                {
-                  data.length > 0 ?
-                     data.map((item, index) => {
+                  loading ?
+                     arrSkeleton.map((item, index) => {
                         return (
-                           <BorderBottomItem
-                              key={index}
-                              borderType="all"
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name + '.' + item.extension}
-                              titleWeight="normal"
-                              onPress={() => { setIdSelect(item.id); setModal(true) }}
-                           />
+                           <Skeleton key={index} width={100} height={40} widthType="percent" borderRadius={10} />
                         )
                      })
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+                     data.length > 0 ?
+                        data.map((item, index) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType="all"
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                 title={item.name + '.' + item.extension}
+                                 titleWeight="normal"
+                                 onPress={() => { setIdSelect(item.id); setModal(true) }}
+                              />
+                           )
+                        })
+                        :
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
                }
             </View>
          </View>