feat(component): skeleton render

src/components/renderSkeleton.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Card } from 'react-native-paper';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+const renderSkeletonPresence = (length) => {
+    return Array.from({ length }).map((_, index) => (
+        <Card key={index} style={styles.cardPrecense}>
+            <Card.Content>
+                <SkeletonPlaceholder>
+                    <View style={[styles.row, { justifyContent: 'space-between' }]}>
+                        <View style={[styles.row, styles.presenceDate, { width: 150, height: 20, borderRadius: 5 }]} />
+                        <View style={[styles.presenceDate, { backgroundColor: '#E0E0E0', width: 80, height: 20, borderRadius: 5 }]} />
+                    </View>
+                    <View style={[styles.row, { justifyContent: 'space-between' }]}>
+                        <View style={[styles.row, { width: 150, height: 20 }]}>
+                            <View style={{ width: 20, height: 20, borderRadius: 5 }} />
+                            <View style={{ width: 100, height: 20, marginLeft: 5, borderRadius: 5 }} />
+                        </View>
+                        <View style={[styles.row, { width: 150, height: 20 }]}>
+                            <View style={{ width: 40, height: 20, borderRadius: 5 }} />
+                            <View style={{ width: 40, height: 20, marginLeft: 5, borderRadius: 5 }} />
+                            <View style={{ width: 40, height: 20, marginLeft: 5, borderRadius: 5 }} />
+                        </View>
+                    </View>
+                    <View style={[styles.row, { justifyContent: 'space-between' }]}>
+                        <View style={{ width: 150, height: 20, borderRadius: 5 }} />
+                        <View style={{ width: 150, height: 20, marginLeft: 5, borderRadius: 5 }} />
+                    </View>
+                </SkeletonPlaceholder>
+            </Card.Content>
+        </Card>
+    ));
+};
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    cardPrecense: {
+        margin: 10,
+        padding: 10,
+    },
+    presenceDate: {
+        padding: 5,
+        borderRadius: 5,
+    },
+});
+
+export default renderSkeletonPresence;