Skip to content

[ux] 动态页面零 loading 骨架屏:feed / rank / 个人页加 loading.tsx #378

Description

@Mira190

背景

全仓 find app -name "loading.tsx" 结果为 0。SSG 文档页无所谓,但 /feed(SSR 拉后端,含三次退避降级)、/rank/u/[username] 这些动态页在后端慢时是整页白屏——后端跨区(Vercel→CF→Oracle)延迟本来就不稳定(docs/resolve 超时都放宽到了 2500ms)。

方案

给动态路由段加 loading.tsx 骨架屏(App Router 原生 streaming,零额外依赖):

  1. app/[locale]/feed/loading.tsx:卡片列表骨架(PostCard 轮廓 × 6)
  2. app/[locale]/rank/loading.tsx:表格行骨架
  3. app/[locale]/u/[username]/loading.tsx:头像 + 统计块骨架

骨架样式复用现有 tailwind 体系(animate-pulse),与暗色模式兼容。

验收

  • DevTools 网络限速 Slow 3G 下访问 /feed:先见骨架后见内容,无整页白屏
  • SSG 路由不受影响(build 表 diff 无变化)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions