AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-15 12:55:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor card loading

Browse Source
This commit is contained in:
Joel 2024-10-15 22:52:57 +08:00
parent 89fb6eb648
commit 35384bda41
3 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/components/plugins/card/base/org-info.tsx
View File

@ -4,7 +4,6 @@ type Props = {
orgName: string
packageName: string
packageNameClassName?: string
isLoading?: boolean
}
const OrgInfo = ({
@ -12,32 +11,16 @@ const OrgInfo = ({
orgName,
packageName,
packageNameClassName,
isLoading = false,
}: Props) => {
const LoadingPlaceholder = ({ width }: { width: string }) => (
<div className={`h-2 w-${width} rounded-sm opacity-20 bg-text-quaternary`} />
)
return (
<div className={cn('flex items-center h-4 space-x-0.5', className)}>
{isLoading
? (
<LoadingPlaceholder width="[41px]" />
)
: (
<span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
)}
<span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
<span className='shrink-0 text-text-quaternary system-xs-regular'>
{isLoading ? '·' : '/'}
/
</span>
<span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
{packageName}
</span>
{isLoading
? (
<LoadingPlaceholder width="[180px]" />
)
: (
<span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
{packageName}
</span>
)}
</div>
)
}

46
web/app/components/plugins/card/base/placeholder.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Group } from '../../../base/icons/src/vender/other'
import Title from './title'
import cn from '@/utils/classnames'
type Props = {
wrapClassName: string
loadingFileName: string
}
export const LoadingPlaceholder = ({ className }: { className?: string }) => (
<div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
)
const Placeholder = ({
wrapClassName,
loadingFileName,
}: Props) => {
return (
<div className={wrapClassName}>
<div className="flex">
<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'>
<div className='flex w-5 h-5 justify-center items-center'>
<Group className='text-text-tertiary' />
</div>
</div>
<div className="ml-3 grow">
<div className="flex items-center h-5">
<Title title={loadingFileName} />
</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>
</div>
<LoadingPlaceholder className="mt-3 w-[420px]" />
</div>
)
}
export default Placeholder

43
web/app/components/plugins/card/index.tsx
View File

@ -2,11 +2,11 @@ import React from 'react'
import { RiVerifiedBadgeLine } from '@remixicon/react'
import type { Plugin } from '../types'
import Icon from '../card/base/card-icon'
import { Group } from '../../base/icons/src/vender/other'
import CornerMark from './base/corner-mark'
import Title from './base/title'
import OrgInfo from './base/org-info'
import Description from './base/description'
import Placeholder from './base/placeholder'
import cn from '@/utils/classnames'
import type { Locale } from '@/i18n'
@ -41,45 +41,40 @@ const Card = ({
const getLocalizedText = (obj: Record<string, string> | undefined) =>
obj?.[locale] || obj?.['en-US'] || ''
const LoadingPlaceholder = ({ className }: { className?: string }) => (
<div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
)
const wrapClassName = cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)
if (isLoading) {
return (
<Placeholder
wrapClassName={wrapClassName}
loadingFileName={loadingFileName!}
/>
)
}
return (
<div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
{!hideCornerMark && !isLoading && <CornerMark text={type} />}
{!hideCornerMark && <CornerMark text={type} />}
{/* Header */}
<div className="flex">
{isLoading
? (<div
className='flex max-w-10 max-h-10 p-1 justify-center items-center gap-2 flex-grow rounded-[10px]
border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
<div className='flex w-5 h-5 justify-center items-center'>
<Group className='text-text-tertiary' />
</div>
</div>)
: <Icon src={icon} installed={installed} />}
<Icon src={icon} installed={installed} />
<div className="ml-3 grow">
<div className="flex items-center h-5">
<Title title={loadingFileName || getLocalizedText(label)} />
{!isLoading && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
<Title title={getLocalizedText(label)} />
<RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
{titleLeft} {/* This can be version badge */}
</div>
<OrgInfo
className="mt-0.5"
orgName={org}
packageName={name}
isLoading={isLoading}
/>
</div>
</div>
{isLoading
? <LoadingPlaceholder className="mt-3 w-[420px]" />
: <Description
className="mt-3"
text={getLocalizedText(brief)}
descriptionLineRows={descriptionLineRows}
/>}
<Description
className="mt-3"
text={getLocalizedText(brief)}
descriptionLineRows={descriptionLineRows}
/>
{footer && <div>{footer}</div>}
</div>
)