managarten/memoro/apps/mobile/components/skeletons/sections/MemoMetadataSkeleton.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import { getSkeletonColor, skeletonBase, skeletonText, skeletonBox, skeletonRow, skeletonSpacing } from '../utils/skeletonStyles';
import { SkeletonAnimation } from '../utils/SkeletonAnimation';

export const MemoMetadataSkeleton: React.FC = () => {
  const { colors, isDark } = useTheme();
  const skeletonColor = getSkeletonColor(isDark, colors);

  return (
    <SkeletonAnimation style={styles.container}>
      <View style={[skeletonRow, styles.dateRow]}>
        <View style={[skeletonBase, skeletonText(14), styles.dateText, { backgroundColor: skeletonColor }]} />
      </View>
      <View style={[skeletonRow, styles.tagsRow]}>
        <View style={[skeletonBase, skeletonBox(60, 24), styles.tag, { backgroundColor: skeletonColor }]} />
        <View style={[skeletonBase, skeletonBox(80, 24), styles.tag, { backgroundColor: skeletonColor }]} />
        <View style={[skeletonBase, skeletonBox(70, 24), styles.tag, { backgroundColor: skeletonColor }]} />
      </View>
    </SkeletonAnimation>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,  // Same as memo page
    marginBottom: 24,       // Add proper spacing
  },
  dateRow: {
    marginBottom: skeletonSpacing.sm,
  },
  dateText: {
    width: 150,
  },
  tagsRow: {
    flexWrap: 'wrap',
    gap: 8,
  },
  tag: {
    borderRadius: 12,
  },
});