zycandClaude Opus 4.8
7c6d4477da
渐进渲染后,列表在接口返回前会短暂显示「0 SKU / 显示 0」的空状态,易被误读为「没数据」。
新增 SkeletonGrid/SkeletonRows(components/loading),区分「加载中(请求在途且无数据)」与
「加载完确实为空」:
- 全局态页(商品库/视频项目/工作台最近项目):App 传 loading={!dataLoaded},未加载完显示骨架。
- 自取页(资产库/商品详情AI素材/图片生成任务/账单流水):各自 loading 标志,首次拉取时显示骨架/加载行。
- 团队成员有 owner 兜底行(非空)不改。
闸:9 页全绿、功能正常;实测 /products 加载期显示骨架→数据到后渲染真实卡片。
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
29 lines
874 B
TypeScript
29 lines
874 B
TypeScript
import "./loading.css";
|
|
|
|
// 列表数据在途时的骨架屏(grid 卡片 / 行),替代「为空」状态,让用户看到「加载中」而非「没数据」。
|
|
export function SkeletonGrid({ count = 8 }: { count?: number }) {
|
|
return (
|
|
<div>
|
|
<div className="skeleton-loading-tag">// 加载中…</div>
|
|
<div className="skeleton-grid">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div className="skeleton-block skeleton-card" key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonRows({ count = 6 }: { count?: number }) {
|
|
return (
|
|
<div>
|
|
<div className="skeleton-loading-tag">// 加载中…</div>
|
|
<div className="skeleton-rows">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div className="skeleton-block skeleton-line" key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|