recherche

app/components/ui/PipelineSkeleton.tsx

@@ -0,0 +1,37 @@
+import { ScrollView, View } from 'react-native';
+
+import { UI } from '@/constants/uiTheme';
+
+const COL_W = 216;
+
+export function PipelineSkeleton() {
+  return (
+    <ScrollView
+      horizontal
+      className="flex-1"
+      contentContainerStyle={{ padding: 12, paddingBottom: 96 }}
+      accessibilityLabel="Chargement du pipeline"
+    >
+      {Array.from({ length: 4 }).map((_, col) => (
+        <View
+          key={col}
+          className="mr-3 rounded-2xl border bg-white p-3"
+          style={{ width: COL_W, borderColor: UI.border }}
+        >
+          <View className="mb-3 h-6 w-[85%] rounded-md" style={{ backgroundColor: '#E2E8F0' }} />
+          <View className="mb-2 h-3 w-10 rounded" style={{ backgroundColor: '#CBD5E1' }} />
+          {Array.from({ length: 3 }).map((__, row) => (
+            <View
+              key={row}
+              className="mb-2 rounded-xl border p-3"
+              style={{ borderColor: '#E2E8F0', backgroundColor: '#F8FAFC' }}
+            >
+              <View className="mb-2 h-4 w-[90%] rounded" style={{ backgroundColor: '#E2E8F0' }} />
+              <View className="h-3 w-[55%] rounded" style={{ backgroundColor: '#F1F5F9' }} />
+            </View>
+          ))}
+        </View>
+      ))}
+    </ScrollView>
+  );
+}