gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-26 00:05:45 +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 = () => { const LeftLegend = () => {
return ( 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='grid grid-cols-1 justify-center items-center'>
<div className='shrink-0 flex flex-col justify-center'> {[...Array(5)].map((_, index) => (
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' /> <div
</div> key={`grid-${index}`}
<div className='shrink-0 flex flex-col justify-center'> className='shrink-0 flex flex-col justify-center mb-10'
<div className='h-4 w-8 bg-gray-200 rounded animate-pulse' /> >
</div> <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
<div className='shrink-0 flex flex-col justify-center'> </div>
<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> </div>
</> </>
); );
@@ -37,8 +33,8 @@ const ChartArea = () => {
return ( return (
<> <>
<div className='flex-1 flex flex-col relative'> <div className='flex-1 min-w-0 flex flex-col relative'>
<div className='flex-1 ml-6 flex flex-col'> <div className='flex-1 ml-6 min-w-0 flex flex-col'>
<div className='flex-1 relative flex flex-col justify-between py-4'> <div className='flex-1 relative flex flex-col justify-between py-4'>
{[...Array(5)].map((_, index) => ( {[...Array(5)].map((_, index) => (
<div <div
@@ -49,18 +45,18 @@ const ChartArea = () => {
))} ))}
</div> </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) => ( {ranges.map((range) => (
<div <div
key={range} 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' }} style={{ animationDelay: '0.5s' }}
/> />
))} ))}
</div> </div>
<div className='flex justify-center pb-1'> <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> </div>
</div> </div>
@@ -92,7 +88,7 @@ const EmptyState = () => {
const UniformityBarChartSkeleton = () => { const UniformityBarChartSkeleton = () => {
return ( return (
<div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'> <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 /> <LeftLegend />
<ChartArea /> <ChartArea />
</div> </div>