38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
interface Props {
|
|
count?: number;
|
|
}
|
|
|
|
/** 帖子列表加载骨架屏（对齐卡片式列表） */
|
|
export default function PostListSkeleton({ count = 8 }: Props) {
|
|
return (
|
|
<div className="post-list-skeleton" aria-busy="true" aria-label="加载中">
|
|
{Array.from({ length: count }, (_, i) => (
|
|
<div key={i} className="post-row post-row--skeleton">
|
|
<Skeleton className="skeleton--avatar" />
|
|
<div className="post-body">
|
|
<div className="post-head">
|
|
<div className="skeleton-meta-row">
|
|
<Skeleton className="skeleton--meta" />
|
|
<Skeleton className="skeleton--meta skeleton--meta-short" />
|
|
</div>
|
|
{i % 4 === 0 && <Skeleton className="skeleton--badge" />}
|
|
</div>
|
|
<Skeleton className="skeleton--title" style={{ width: `${58 + (i % 4) * 9}%` }} />
|
|
<Skeleton className="skeleton--excerpt" style={{ width: `${72 + (i % 3) * 8}%` }} />
|
|
<div className="post-foot">
|
|
<Skeleton className="skeleton--badge" />
|
|
<div className="post-stats">
|
|
<Skeleton className="skeleton--stat" />
|
|
<Skeleton className="skeleton--stat" />
|
|
<Skeleton className="skeleton--stat" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|