upd: skeleton loading

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

No Issues

components/skeleton.tsx

@@ -0,0 +1,40 @@
+import Styles from '@/constants/Styles';
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+
+const Skeleton = ({ width, height, borderRadius = 0, widthType = 'number' }: { width: number, widthType?: 'number' | 'percent', height: number, borderRadius?: number }) => {
+   const opacity = useSharedValue(0.3);
+
+   useEffect(() => {
+      opacity.value = withRepeat(
+         withTiming(1, { duration: 500, easing: Easing.linear }),
+         -1,
+         true
+      );
+   }, []);
+
+   const animatedStyle = useAnimatedStyle(() => {
+      return {
+         opacity: opacity.value,
+      };
+   });
+
+   return (
+      <Animated.View
+         style={[
+            styles.skeleton,
+            { width: widthType === 'percent' ? `${width}%` : width, height: height, borderRadius: borderRadius },
+            animatedStyle, Styles.mv05
+         ]}
+      />
+   );
+};
+
+const styles = StyleSheet.create({
+   skeleton: {
+      backgroundColor: '#e0e0e0',
+   },
+});
+
+export default Skeleton;