upd: skeleton dokumen

Deskripsi:
- dokumen divisi

NO Issues

app/(application)/division/[id]/(fitur-division)/document/index.tsx

@@ -9,6 +9,7 @@ import { InputForm } from "@/components/inputForm";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalFloat from "@/components/modalFloat";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
+import Skeleton from "@/components/skeleton";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import {
@@ -69,6 +70,8 @@ export default function DocumentDivision() {
    const [modalMore, setModalMore] = useState(false);
    const [isRename, setRename] = useState(false);
    const dispatch = useDispatch();
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
    const update = useSelector((state: any) => state.dokumenUpdate);
    const [bodyRename, setBodyRename] = useState({
       id: "",
@@ -80,6 +83,7 @@ export default function DocumentDivision() {
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDocument({
             user: hasil,
@@ -91,6 +95,8 @@ export default function DocumentDivision() {
          setDataJalur(response.jalur);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -294,67 +300,80 @@ export default function DocumentDivision() {
          <ScrollView style={{ height: "100%" }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.rowItemsCenter]}>
-                  {dataJalur.map((item, index) => (
+                  {
-                     <Pressable
+                     loading ?
-                        key={index}
+                        arrSkeleton.map((item, index) => (
-                        style={[Styles.rowItemsCenter]}
+                           <Skeleton key={index} width={60} height={10} borderRadius={10} style={[Styles.mr05]} />
-                        onPress={() => {
+                        ))
-                           setPath(item.id);
+                        :
-                        }}
+                        dataJalur.map((item, index) => (
-                     >
+                           <Pressable
-                        {item.id != "home" && (
-                           <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
-                        )}
-                        <Text> {item.name} </Text>
-                     </Pressable>
-                  ))}
-               </View>
-               <View>
-                  {data.length > 0 ? (
-                     data.map((item, index) => {
-                        const isSelected = selectedFiles.some(
-                           (i: any) => i?.id == item.id
-                        );
-                        return (
-                           <ItemFile
                               key={index}
-                              category={
+                              style={[Styles.rowItemsCenter]}
-                                 item.category == "FOLDER"
-                                    ? item.share
-                                       ? "folder-shared"
-                                       : "folder"
-                                    : item.share
-                                       ? "file-shared"
-                                       : "file"
-                              }
-                              title={
-                                 item.category == "FOLDER"
-                                    ? item.name
-                                    : `${item.name}.${item.extension}`
-                              }
-                              dateTime={item.createdAt}
-                              onChecked={() => {
-                                 handleCheckboxChange(index);
-                              }}
-                              checked={isSelected}
                               onPress={() => {
                                  setPath(item.id);
                               }}
-                           />
+                           >
-                        );
+                              {item.id != "home" && (
-                     })
+                                 <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
-                  ) : (
+                              )}
-                     <Text
+                              <Text> {item.name} </Text>
-                        style={[
+                           </Pressable>
-                           Styles.textDefault,
+                        ))
-                           Styles.cGray,
+                  }
-                           Styles.mt15,
+               </View>
-                           { textAlign: "center" },
+               <View>
-                        ]}
+                  {
-                     >
+                     loading ?
-                        Tidak ada dokumen
+                        arrSkeleton.map((item, index) => (
-                     </Text>
+                           <Skeleton key={index} width={100} widthType="percent" height={50} borderRadius={10} />
-                  )}
+                        ))
+                        :
+                        data.length > 0 ? (
+                           data.map((item, index) => {
+                              const isSelected = selectedFiles.some(
+                                 (i: any) => i?.id == item.id
+                              );
+                              return (
+                                 <ItemFile
+                                    key={index}
+                                    category={
+                                       item.category == "FOLDER"
+                                          ? item.share
+                                             ? "folder-shared"
+                                             : "folder"
+                                          : item.share
+                                             ? "file-shared"
+                                             : "file"
+                                    }
+                                    title={
+                                       item.category == "FOLDER"
+                                          ? item.name
+                                          : `${item.name}.${item.extension}`
+                                    }
+                                    dateTime={item.createdAt}
+                                    onChecked={() => {
+                                       handleCheckboxChange(index);
+                                    }}
+                                    checked={isSelected}
+                                    onPress={() => {
+                                       setPath(item.id);
+                                    }}
+                                 />
+                              );
+                           })
+                        ) : (
+                           <Text
+                              style={[
+                                 Styles.textDefault,
+                                 Styles.cGray,
+                                 Styles.mt15,
+                                 { textAlign: "center" },
+                              ]}
+                           >
+                              Tidak ada dokumen
+                           </Text>
+                        )}
                </View>
             </View>
          </ScrollView>