mirror of
https://github.com/langgenius/dify.git
synced 2026-06-17 23:21:12 +08:00
9b74df21d0
Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: yyh <yuanyouhuilyz@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: hjlarry <hjlarry@163.com> Co-authored-by: fatelei <fatelei@gmail.com> Co-authored-by: Asuka Minato <i@asukaminato.eu.org> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com> Co-authored-by: gigglewang <gigglewang@dify.ai> Co-authored-by: Yunlu Wen <yunlu.wen@dify.ai> Co-authored-by: chariri <w@chariri.moe> Co-authored-by: Evan <2869018789@qq.com> Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { SkeletonContainer, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
|
|
|
|
type AppCardSkeletonProps = {
|
|
count?: number
|
|
}
|
|
|
|
/**
|
|
* Skeleton placeholder for App cards during loading states.
|
|
* Matches the visual layout of AppCard component.
|
|
*/
|
|
export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps) => {
|
|
const skeletonKeys = Array.from({ length: count }, (_, index) => `app-card-skeleton-${index}`)
|
|
|
|
return (
|
|
<>
|
|
{skeletonKeys.map(key => (
|
|
<div
|
|
key={key}
|
|
className="h-[160px] overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg p-4 shadow-xs"
|
|
>
|
|
<SkeletonContainer className="h-full">
|
|
<SkeletonRow>
|
|
<SkeletonRectangle className="size-10 animate-pulse rounded-lg" />
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<SkeletonRectangle className="h-4 w-2/3 animate-pulse" />
|
|
<SkeletonRectangle className="h-3 w-1/3 animate-pulse" />
|
|
</div>
|
|
</SkeletonRow>
|
|
<div className="mt-4 flex flex-col gap-2">
|
|
<SkeletonRectangle className="h-3 w-full animate-pulse" />
|
|
<SkeletonRectangle className="h-3 w-4/5 animate-pulse" />
|
|
</div>
|
|
</SkeletonContainer>
|
|
</div>
|
|
))}
|
|
</>
|
|
)
|
|
})
|
|
|
|
AppCardSkeleton.displayName = 'AppCardSkeleton'
|