Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 1x 1x 1x 1x 8x | import React from 'react';
import { EvenDataTableLoaderProps } from '@sb/types';
import { View } from 'react-native';
import { Skeleton } from '@sb/ui/components/atoms/Skeleton/mobile/Skeleton.native';
export const EvenDataTableLoader: React.FC<EvenDataTableLoaderProps> = ({
row = 8,
showCategoryFilter,
showMarketFilter,
}) => {
const renderCategoryLoader = () => (
<View className={'w-full flex flex-row justify-start p-2 gap-3'}>
{Array.from({ length: 10 }).map((_, i) => (
<View className={"items-center"} key={`category_loader_${i}`}>
<Skeleton
width={35}
height={35}
shape={'rounded'}
className={'bg-element-nuance rounded-full'}
/>
<Skeleton className={'bg-element-nuance rounded-3xl mt-2'} width={30} height={10} />
</View>
))}
</View>
);
const renderMarketLoader = () => (
<View className={'w-full mt-3 mb-2 flex flex-row justify-start p-2 gap-2'}>
{Array.from({ length: 8 }).map((_, i) => (
<Skeleton
key={`market_loader_${i}`}
width={50}
height={35}
shape={'rounded'}
className={'bg-element-nuance'}
/>
))}
</View>
);
return (
<View testID={'even-data-table-loader'} className={'mt-5 flex w-full flex-col'}>
{showCategoryFilter && renderCategoryLoader()}
{showMarketFilter && renderMarketLoader()}
{Array.from({ length: row }).map((_, rowIdx) => (
<View key={rowIdx}>
<View
className={
'bg-primary border-primary-background flex flex-row items-center justify-between border-l-2 px-2 py-2'
}
>
<View className={'flex w-1/3 flex-row justify-between'}>
<Skeleton width={20} height={20} shape={'rounded'} className={'bg-element-nuance'} />
<Skeleton
className={'bg-element-nuance ml-2 rounded-2xl'}
shape={'rectangular'}
width={140}
height={20}
/>
</View>
<Skeleton className={'bg-element-nuance rounded-md'} width={20} height={20} />
<Skeleton className={'bg-element-nuance rounded-md'} width={20} height={20} />
<Skeleton className={'bg-element-nuance rounded-md'} width={20} height={20} />
</View>
<View
className={
'border-primary-background bg-element-nuance flex w-full flex-row items-center justify-between border-l-2 px-2 py-1'
}
>
<View className={'flex flex-col gap-2'}>
<Skeleton
className={'bg-primary rounded-2xl'}
shape={'rectangular'}
width={140}
height={20}
/>
<Skeleton
className={'bg-primary rounded-2xl'}
shape={'rectangular'}
width={140}
height={20}
/>
</View>
<View className={'flex flex-col gap-2 px-2'}>
<View className={'flex flex-row gap-2'}>
<Skeleton width={20} height={20} className={'bg-primary rounded-md'} />
<Skeleton width={20} height={20} className={'bg-primary rounded-md'} />
</View>
<View className={'flex flex-row gap-2'}>
<Skeleton width={20} height={20} className={'bg-primary rounded-md'} />
<Skeleton width={20} height={20} className={'bg-primary rounded-md'} />
</View>
</View>
<View className={'flex flex-row gap-1'}>
<Skeleton width={40} className={'bg-primary-background rounded-l-md'} />
<Skeleton width={40} className={'bg-primary-background'} />
<Skeleton width={40} className={'bg-primary-background rounded-r-md'} />
</View>
</View>
</View>
))}
</View>
);
};
|