opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-02 12:50:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

apply the skeleton component to the Plugin loading card

Browse Source
This commit is contained in:
Yi 2024-12-05 15:27:47 +08:00
parent b8f9747849
commit d6dea67947
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/skeleton/index.tsx
View File

@ -3,7 +3,7 @@ import classNames from '@/utils/classnames'
type SkeletonProps = ComponentProps<'div'>
export const SkeletonContanier: FC<SkeletonProps> = (props) => {
export const SkeletonContainer: FC<SkeletonProps> = (props) => {
const { className, children, ...rest } = props
return (
<div className={classNames('flex flex-col gap-1', className)} {...rest}>
@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => {
export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
const { className, children, ...rest } = props
return (
<div className={classNames('h-2 rounded-sm opacity-20 bg-text-tertiary my-1', className)} {...rest}>
<div className={classNames('h-2 rounded-sm opacity-20 bg-text-quaternary my-1', className)} {...rest}>
{children}
</div>
)

37
web/app/components/plugins/card/base/placeholder.tsx
View File

@ -1,5 +1,6 @@
import { Group } from '../../../base/icons/src/vender/other'
import Title from './title'
import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
import cn from '@/utils/classnames'
type Props = {
@ -17,7 +18,7 @@ const Placeholder = ({
}: Props) => {
return (
<div className={wrapClassName}>
<div className="flex">
<SkeletonRow>
<div
className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
@ -25,24 +26,24 @@ const Placeholder = ({
<Group className='text-text-tertiary' />
</div>
</div>
<div className="ml-3 grow">
<div className="flex items-center h-5">
{loadingFileName ? (
<Title title={loadingFileName} />
) : (
<LoadingPlaceholder className="w-[260px]" />
)}
</div>
<div className={cn('flex items-center h-4 space-x-0.5')}>
<LoadingPlaceholder className="w-[41px]" />
<span className='shrink-0 text-text-quaternary system-xs-regular'>
·
</span>
<LoadingPlaceholder className="w-[180px]" />
</div>
<div className="grow">
<SkeletonContainer>
<div className="flex items-center h-5">
{loadingFileName ? (
<Title title={loadingFileName} />
) : (
<SkeletonRectangle className="w-[260px]" />
)}
</div>
<SkeletonRow className="h-4">
<SkeletonRectangle className="w-[41px]" />
<SkeletonPoint />
<SkeletonRectangle className="w-[180px]" />
</SkeletonRow>
</SkeletonContainer>
</div>
</div>
<LoadingPlaceholder className="mt-3 w-[420px]" />
</SkeletonRow>
<SkeletonRectangle className="mt-3 w-[420px]" />
</div>
)
}