38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|