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,7 +300,13 @@ export default function DocumentDivision() {
          <ScrollView style={{ height: "100%" }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.rowItemsCenter]}>
-                  {dataJalur.map((item, index) => (
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => (
+                           <Skeleton key={index} width={60} height={10} borderRadius={10} style={[Styles.mr05]} />
+                        ))
+                        :
+                        dataJalur.map((item, index) => (
                            <Pressable
                               key={index}
                               style={[Styles.rowItemsCenter]}
@@ -307,10 +319,17 @@ export default function DocumentDivision() {
                               )}
                               <Text> {item.name} </Text>
                            </Pressable>
-                  ))}
+                        ))
+                  }
                </View>
                <View>
-                  {data.length > 0 ? (
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => (
+                           <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