Skip to content

fix(projects): render project loading shell immediately - #514

Merged
huyanxius merged 2 commits into
1024XEngineer:mainfrom
huyanxius:fix/510-project-loading-shell
Aug 21, 2026
Merged

fix(projects): render project loading shell immediately#514
huyanxius merged 2 commits into
1024XEngineer:mainfrom
huyanxius:fix/510-project-loading-shell

Conversation

@huyanxius

Copy link
Copy Markdown
Collaborator

项目中心现在会在 /projects 请求返回前立即呈现新建项目入口和三张项目卡片骨架,避免聚合请求期间页面近乎空白,同时保留单请求性能优化。

Why

PR #431 将项目预览聚合进项目列表请求后,页面速度明显提升,但请求返回前只剩一行“正在读取项目…”;创建入口和项目布局会整块延后出现,形成突兀的空白等待。

Changes

  • 请求期间立即显示可点击的“新建项目”入口。
  • 在“最近项目”区域显示三张与真实卡片等比例的加载骨架。
  • 数据返回后原位替换为真实项目卡片,并保留现有空态、错误态、分页和删除行为。
  • 增加回归测试,覆盖加载态可访问性、占位数量及真实数据到达后的清理。

Implementation

  • 复用现有 PixelMatrix 作为预览区加载反馈,元数据使用低对比静态占位。
  • 保留单次 /projects 请求,不恢复逐项目 /characters 请求,也不新增动画依赖或样式文件。
  • 使用 role="status"aria-busy="true" 暴露加载状态,并将装饰骨架从辅助技术中隐藏。

Verification

  • npm test -- src/pages/projects/index.test.tsx:1 个测试文件、9 个测试通过。
  • npx oxfmt --check src/pages/projects/index.tsx src/pages/projects/index.test.tsx:2 个文件通过。
  • npx oxlint src/pages/projects/index.tsx src/pages/projects/index.test.tsx:通过,无错误。
  • VITE_API_BASE_URL=/api npm run build:类型检查与生产构建通过;仅保留既有 chunk-size 警告。
  • git diff --check:通过。
  • 受控延迟 /projects 的真实浏览器检查:加载骨架稳定显示,视觉验收通过。

Screenshots

Desktop

项目中心加载骨架

Scope

Related Issues

Closes #510

Refs #431

The aggregated project request leaves the page blank until list data arrives.

Render the create entry and pixel-matrix project placeholders while the request is pending.

Users retain project context without restoring per-project preview requests.
The loading shell must remain visible before project data resolves.

Gate the project request and assert the create entry, placeholders, and accessible status.

The regression test also verifies cleanup when real cards replace the shell.
@vercel

vercel Bot commented Aug 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
windup Ready Ready Preview Aug 21, 2026 6:16am

@codecov

codecov Bot commented Aug 21, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@fennoai fennoai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review conclusion

已检查项目页的加载壳渲染、请求失败处理、分页切换、删除后的状态更新,以及新增的加载态测试。该改动在项目列表请求完成前保留新建项目入口并展示占位卡片,请求完成后正确切换到项目列表;未发现满足审查标准的可操作性问题。

验证结果:

  • npm test -- --run src/pages/projects/index.test.tsx(9 个测试通过)
  • npm run typecheck(通过)
  • npm run lint(通过)

@xyh202131 xyh202131 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已复核当前提交:项目列表请求期间立即呈现可访问的加载壳与新建入口,数据返回后原位替换,不恢复逐项目请求瀑布;加载、错误、分页与清理行为有测试覆盖。当前 CI 全部通过且无未解决审查线程。

@huyanxius
huyanxius merged commit 079d9f4 into 1024XEngineer:main Aug 21, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: render the project loading shell before list data

2 participants