@replyke/ui-core-react-native/dist/esm/components/Skeleton.js

Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, StyleSheet, Animated } from "react-native";
function Skeleton({ style }) {
    return (_jsx(Animated.View, { style: [styles.skeleton, style, { opacity: new Animated.Value(0.6) }] }));
}
function CommentSkeleton() {
    return (_jsxs(View, { style: styles.commentContainer, children: [_jsx(Skeleton, { style: styles.avatarSkeleton }), _jsxs(View, { style: styles.textSkeletonContainer, children: [_jsx(Skeleton, { style: { ...styles.textSkeleton, width: "30%" } }), _jsx(Skeleton, { style: styles.textSkeleton }), _jsx(Skeleton, { style: { ...styles.textSkeleton, width: "15%" } })] })] }));
}
function UserMentionSkeleton() {
    return (_jsxs(View, { style: styles.mentionContainer, children: [_jsx(Skeleton, { style: styles.mentionAvatarSkeleton }), _jsx(View, { style: { flex: 1 }, children: _jsx(Skeleton, { style: styles.textSkeleton }) })] }));
}
const styles = StyleSheet.create({
    skeleton: {
        backgroundColor: "#efefef",
        borderRadius: 8,
        width: "100%",
        height: 16,
    },
    commentContainer: {
        flexDirection: "row",
        alignItems: "flex-start",
        gap: 8,
        width: "100%",
    },
    avatarSkeleton: {
        height: 50,
        width: 50,
        borderRadius: 25,
    },
    textSkeletonContainer: {
        flex: 1,
        gap: 8,
    },
    textSkeleton: {
        width: "100%",
        height: 16,
        borderRadius: 8,
    },
    mentionContainer: {
        flexDirection: "row",
        gap: 8,
        width: "100%",
        alignItems: "center",
    },
    mentionAvatarSkeleton: {
        height: 35,
        width: 35,
        borderRadius: 17.5,
    },
});
export { CommentSkeleton, UserMentionSkeleton, Skeleton };
//# sourceMappingURL=Skeleton.js.map