40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { View } from 'react-native';
|
|
|
|
import { UI } from '@/constants/uiTheme';
|
|
|
|
type Props = {
|
|
rows?: number;
|
|
/** Hauteur des cartes (liste verticale). */
|
|
variant?: 'card' | 'compact';
|
|
};
|
|
|
|
export function ListSkeleton({ rows = 6, variant = 'card' }: Props) {
|
|
const gap = variant === 'compact' ? 10 : 14;
|
|
const pad = variant === 'compact' ? 12 : 16;
|
|
return (
|
|
<View className="px-3 pt-3" accessibilityLabel="Chargement en cours">
|
|
{Array.from({ length: rows }).map((_, i) => (
|
|
<View
|
|
key={i}
|
|
className="mb-3 rounded-2xl border bg-white"
|
|
style={{
|
|
borderColor: UI.border,
|
|
padding: pad,
|
|
gap,
|
|
}}
|
|
>
|
|
<View
|
|
className="h-5 rounded-md"
|
|
style={{ width: '62%', backgroundColor: '#E2E8F0' }}
|
|
/>
|
|
<View className="h-4 rounded-md" style={{ width: '92%', backgroundColor: '#F1F5F9' }} />
|
|
<View className="h-4 rounded-md" style={{ width: '78%', backgroundColor: '#F1F5F9' }} />
|
|
{variant === 'card' ? (
|
|
<View className="h-4 rounded-md" style={{ width: '44%', backgroundColor: '#E2E8F0' }} />
|
|
) : null}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|