upd: skeleton loading

Deskripsi:
- home
- list lembaga desa
- list jabatan
- list member
- detail member

No Issues

components/home/projectHome.tsx

@@ -8,6 +8,7 @@ import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import LabelStatus from "../labelStatus";
 import PaperGridContent from "../paperGridContent";
 import ProgressBar from "../progressBar";
+import Skeleton from "../skeleton";
 
 type Props = {
    id: string
@@ -23,14 +24,18 @@ export default function ProjectHome() {
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
+   const [loading, setLoading] = useState(true)
 
    async function handleData() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "kegiatan", user: hasil })
          setData(response.data)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -41,44 +46,49 @@ export default function ProjectHome() {
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Kegiatan Terupdate</Text>
-         <Carousel
-            ref={ref}
-            style={{ width: "100%" }}
-            width={width * 0.8}
-            height={235}
-            data={data}
-            loop={true}
-            autoPlay={false}
-            autoPlayReverse={false}
-            pagingEnabled={true}
-            snapEnabled={true}
-            vertical={false}
-            renderItem={({ index }) => (
-               <PaperGridContent content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
-                  <ProgressBar value={data[index].progress} category="carousel" />
-                  <View style={[Styles.rowSpaceBetween]}>
-                     <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
-                     <LabelStatus
-                        size="default"
-                        category={
-                           data[index].status === 0 ? 'primary' :
-                              data[index].status === 1 ? 'warning' :
-                                 data[index].status === 2 ? 'success' :
-                                    data[index].status === 3 ? 'error' :
-                                       'primary'
-                        }
-                        text={
-                           data[index].status === 0 ? 'SEGERA' :
-                              data[index].status === 1 ? 'DIKERJAKAN' :
-                                 data[index].status === 2 ? 'SELESAI' :
-                                    data[index].status === 3 ? 'DIBATALKAN' :
-                                       'SEGERA'
-                        }
-                     />
-                  </View>
-               </PaperGridContent>
-            )}
-         />
+         {
+            loading ? (<Skeleton width={100} height={150} borderRadius={10} widthType="percent" />)
+               :
+               <Carousel
+                  ref={ref}
+                  style={{ width: "100%" }}
+                  width={width * 0.8}
+                  height={235}
+                  data={data}
+                  loop={true}
+                  autoPlay={false}
+                  autoPlayReverse={false}
+                  pagingEnabled={true}
+                  snapEnabled={true}
+                  vertical={false}
+                  renderItem={({ index }) => (
+                     <PaperGridContent content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
+                        <ProgressBar value={data[index].progress} category="carousel" />
+                        <View style={[Styles.rowSpaceBetween]}>
+                           <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
+                           <LabelStatus
+                              size="default"
+                              category={
+                                 data[index].status === 0 ? 'primary' :
+                                    data[index].status === 1 ? 'warning' :
+                                       data[index].status === 2 ? 'success' :
+                                          data[index].status === 3 ? 'error' :
+                                             'primary'
+                              }
+                              text={
+                                 data[index].status === 0 ? 'SEGERA' :
+                                    data[index].status === 1 ? 'DIKERJAKAN' :
+                                       data[index].status === 2 ? 'SELESAI' :
+                                          data[index].status === 3 ? 'DIBATALKAN' :
+                                             'SEGERA'
+                              }
+                           />
+                        </View>
+                     </PaperGridContent>
+                  )}
+               />
+         }
+
       </View>
    )
 }