recherche

app/components/ui/ListSkeleton.tsx

@@ -0,0 +1,39 @@
+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>
+  );
+}