gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-438): Make left legend skeleton DRY and widen gaps

Browse Source
This commit is contained in:
rstubryan
2025-12-26 10:13:17 +07:00
parent f5f154883b
commit d9322cc17d
1 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+15 -19
View File
@@ -4,21 +4,17 @@ import { Icon } from '@iconify/react';
const LeftLegend = () => {
return (
<>
<div className='w-4 h-30 bg-gray-200 rounded animate-pulse flex items-center justify-center self-center'></div>
<div className='w-4 h-30 bg-gray-200 rounded animate-pulse flex items-center justify-center self-center mb-10' />
<div className='grid grid-cols-1 justify-center items-center'>
<div className='shrink-0 flex flex-col justify-center'>
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
</div>
<div className='shrink-0 flex flex-col justify-center'>
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
</div>
<div className='shrink-0 flex flex-col justify-center'>
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
</div>
<div className='shrink-0 flex flex-col justify-center'>
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
</div>
{[...Array(5)].map((_, index) => (
<div
key={`grid-${index}`}
className='shrink-0 flex flex-col justify-center mb-10'
>
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
</div>
))}
</div>
</>
);
@@ -37,8 +33,8 @@ const ChartArea = () => {
return (
<>
<div className='flex-1 flex flex-col relative'>
<div className='flex-1 ml-6 flex flex-col'>
<div className='flex-1 min-w-0 flex flex-col relative'>
<div className='flex-1 ml-6 min-w-0 flex flex-col'>
<div className='flex-1 relative flex flex-col justify-between py-4'>
{[...Array(5)].map((_, index) => (
<div
@@ -49,18 +45,18 @@ const ChartArea = () => {
))}
</div>
<div className='flex justify-between gap-10 px-4 py-2'>
<div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
{ranges.map((range) => (
<div
key={range}
className='flex-1 h-3 bg-gray-200 rounded animate-pulse'
className='h-3 w-8 sm:w-12 md:w-16 bg-gray-200 rounded animate-pulse shrink-0'
style={{ animationDelay: '0.5s' }}
/>
))}
</div>
<div className='flex justify-center pb-1'>
<div className='h-3 w-28 bg-gray-200 rounded animate-pulse' />
<div className='h-3 w-20 sm:w-28 bg-gray-200 rounded animate-pulse' />
</div>
</div>
</div>
@@ -92,7 +88,7 @@ const EmptyState = () => {
const UniformityBarChartSkeleton = () => {
return (
<div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
<div className='flex h-full gap-4'>
<div className='sm:flex hidden h-full gap-4'>
<LeftLegend />
<ChartArea />
</div>