feat: update background styles and add loading skeletons for document detail components
twwu
1 year ago
parent
340a052d44
commit
faa5b63ed4
@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
|
||||
const Slice = React.memo(() => {
|
||||
return (
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
<div className='w-full h-5 bg-state-base-hover flex items-center'>
|
||||
<span className='w-[30px] h-5 bg-state-base-hover-alt' />
|
||||
</div>
|
||||
<div className='w-2/3 h-5 bg-state-base-hover' />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
Slice.displayName = 'Slice'
|
||||
|
||||
const FullDocListSkeleton = () => {
|
||||
return (
|
||||
<div className='w-full grow flex flex-col gap-y-3 relative z-10 overflow-y-hidden'>
|
||||
<div className='absolute top-0 left-0 bottom-14 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
|
||||
{[...Array(15)].map((_, index) => <Slice key={index} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(FullDocListSkeleton)
|
||||
@ -0,0 +1,74 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
SkeletonContanier,
|
||||
SkeletonPoint,
|
||||
SkeletonRectangle,
|
||||
SkeletonRow,
|
||||
} from '@/app/components/base/skeleton'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
const CardSkelton = React.memo(() => {
|
||||
return (
|
||||
<SkeletonContanier className='p-1 pb-2 gap-y-0'>
|
||||
<SkeletonContanier className='px-2 pt-1.5 gap-y-0.5'>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
<SkeletonRow className='grow justify-end gap-1'>
|
||||
<SkeletonRectangle className='w-12 bg-text-quaternary' />
|
||||
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
|
||||
</SkeletonRow>
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-2/3 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
</SkeletonContanier>
|
||||
<SkeletonContanier className='px-2 py-1.5'>
|
||||
<SkeletonRow>
|
||||
<SkeletonRectangle className='w-14 bg-text-quaternary' />
|
||||
<SkeletonRectangle className='w-[88px] bg-text-quaternary' />
|
||||
<SkeletonRectangle className='w-14 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
</SkeletonContanier>
|
||||
</SkeletonContanier>
|
||||
)
|
||||
})
|
||||
|
||||
CardSkelton.displayName = 'CardSkelton'
|
||||
|
||||
const GeneralListSkeleton = () => {
|
||||
return (
|
||||
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
|
||||
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
|
||||
{[...Array(10)].map((_, index) => {
|
||||
return (
|
||||
<div key={index} className='flex items-start gap-x-2'>
|
||||
<Checkbox
|
||||
key={`${index}-checkbox`}
|
||||
className='shrink-0 mt-3.5'
|
||||
disabled
|
||||
/>
|
||||
<div className='grow'>
|
||||
<CardSkelton />
|
||||
{index !== 9 && <div className='w-full px-3'>
|
||||
<Divider type='horizontal' className='bg-divider-subtle my-1' />
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(GeneralListSkeleton)
|
||||
@ -0,0 +1,76 @@
|
||||
import React from 'react'
|
||||
import { RiArrowRightSLine } from '@remixicon/react'
|
||||
import {
|
||||
SkeletonContanier,
|
||||
SkeletonPoint,
|
||||
SkeletonRectangle,
|
||||
SkeletonRow,
|
||||
} from '@/app/components/base/skeleton'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
const CardSkelton = React.memo(() => {
|
||||
return (
|
||||
<SkeletonContanier className='p-1 pb-2 gap-y-0'>
|
||||
<SkeletonContanier className='px-2 pt-1.5 gap-y-0.5'>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
<SkeletonRow className='grow justify-end gap-1'>
|
||||
<SkeletonRectangle className='w-12 bg-text-quaternary' />
|
||||
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
|
||||
</SkeletonRow>
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-2/3 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
</SkeletonContanier>
|
||||
<SkeletonContanier className='p-1 pb-2'>
|
||||
<SkeletonRow>
|
||||
<SkeletonRow className='h-7 pl-1 pr-3 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg'>
|
||||
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-20' />
|
||||
<SkeletonRectangle className='w-32 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
</SkeletonRow>
|
||||
</SkeletonContanier>
|
||||
</SkeletonContanier>
|
||||
)
|
||||
})
|
||||
|
||||
CardSkelton.displayName = 'CardSkelton'
|
||||
|
||||
const ParagraphListSkeleton = () => {
|
||||
return (
|
||||
<div className='relative flex flex-col h-full overflow-y-hidden z-10'>
|
||||
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
|
||||
{[...Array(10)].map((_, index) => {
|
||||
return (
|
||||
<div key={index} className='flex items-start gap-x-2'>
|
||||
<Checkbox
|
||||
key={`${index}-checkbox`}
|
||||
className='shrink-0 mt-3.5'
|
||||
disabled
|
||||
/>
|
||||
<div className='grow'>
|
||||
<CardSkelton />
|
||||
{index !== 9 && <div className='w-full px-3'>
|
||||
<Divider type='horizontal' className='bg-divider-subtle my-1' />
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ParagraphListSkeleton)
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
SkeletonContanier,
|
||||
SkeletonPoint,
|
||||
SkeletonRectangle,
|
||||
SkeletonRow,
|
||||
} from '@/app/components/base/skeleton'
|
||||
|
||||
const ParentChunkCardSkelton = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className='flex flex-col pb-2'>
|
||||
<SkeletonContanier className='p-1 pb-0 gap-y-0'>
|
||||
<SkeletonContanier className='px-2 pt-1.5 gap-y-0.5'>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
<SkeletonPoint className='opacity-20' />
|
||||
<SkeletonRectangle className='w-24 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-full bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
<SkeletonRow className='py-0.5'>
|
||||
<SkeletonRectangle className='w-2/3 bg-text-quaternary' />
|
||||
</SkeletonRow>
|
||||
</SkeletonContanier>
|
||||
</SkeletonContanier>
|
||||
<div className='flex items-center px-3 mt-0.5'>
|
||||
<button className='pt-0.5 text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase' disabled>
|
||||
{t('common.operation.viewMore')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
ParentChunkCardSkelton.displayName = 'ParentChunkCardSkelton'
|
||||
|
||||
export default React.memo(ParentChunkCardSkelton)
|
||||
Loading…
Reference in New Issue