perf: add skeleton for tabs and chat in homepage #8246
Conversation
使用React的useTransition实现平滑过渡，在话题列表排序时显示骨架屏加载状态
使用React的useTransition实现平滑过渡，在消息加载时显示骨架屏 添加MessageSkeleton组件展示加载状态
EurFelux
changed the title
仅在首次渲染时使用startTransition
在获取到有效消息前，空数组多次触发effect导致UI闪烁。添加条件分支处理空数组情况
|
不错，速度提升了，内存占用会增加吗？ |
|
skeleton作为加载中的提示，不适合太密铺满 |
|
测试了，效果不错。内存和cpu都没有涨。very good. |
调整TopicsTab和Messages组件的骨架屏显示效果 - 减少TopicsTab的骨架屏线条数量 - 优化Messages骨架屏的段落宽度和间距 - 移除多余的MessageSkeleton实例
|
|
||
| useEffect(() => { | ||
| const updateTopics = () => { | ||
| if (pinTopicsToTop) { | ||
| setDisplayedTopics( | ||
| [...assistant.topics].sort((a, b) => { | ||
| if (a.pinned && !b.pinned) return -1 | ||
| if (!a.pinned && b.pinned) return 1 | ||
| return 0 | ||
| }) | ||
| ) | ||
| } else { | ||
| setDisplayedTopics(assistant.topics) | ||
| } | ||
| } | ||
|
|
||
| if (isFirstRender) { | ||
| startTransition(() => { | ||
| updateTopics() | ||
| }) | ||
| setIsFirstRender(false) | ||
| } else { | ||
| updateTopics() | ||
| } | ||
| return assistant.topics | ||
| }, [assistant.topics, pinTopicsToTop]) | ||
| }, [assistant.topics, isFirstRender, pinTopicsToTop]) | ||
|
|
||
| // FIXME: 如果添加其他transition会导致skeleton重新显示 | ||
| if (isPending) { | ||
| return <TopicsSkeleton></TopicsSkeleton> | ||
| } |
There was a problem hiding this comment.
topicstab 还有必要用 skeleton 吗？反复在assistants tab 和 topics tab 之间切换每次都会看到一闪而过的 skeleton
There was a problem hiding this comment.
topics渲染占用不少时间，这里能优化切换page的响应时间。但在page中切换tab也会触发重渲染。props又有复杂对象，memo也用不了，切换tab会闪一下的问题不好解决啊。
There was a problem hiding this comment.
topics 现在是虚拟列表了还会占用很多时间吗？应该只会渲染可见的那些？
There was a problem hiding this comment.
我这本地测试大概用36ms渲染，不少了
There was a problem hiding this comment.
而且不知为何DraggableVirtualList有多次渲染和提交的过程，实际响应时间大概60~70ms左右
There was a problem hiding this comment.
会卡顿吗？开发模式？开着开发工具肯定是会慢的
There was a problem hiding this comment.
main分支，开发模式（关闭开发工具）：
https://github.com/user-attachments/assets/001d3bc0-89d1-4619-93a5-317d3a43b05e
skeleton 确实能改善体验，不过能消除闪烁就更好了，可以在话题数量比较多的时候才出现？
Cherry.Studio.2025-07-18.mp4 |
添加isFirstRender状态变量以区分首次渲染和后续更新 避免因多次触发重渲染导致的UI闪烁问题
更新 7dc4d96 后，新建话题，首次发消息，skeleton会闪动一次 |
移除空消息数组时的处理，避免发送第一条消息时触发skeleton 将isFirstRender加入骨架屏显示条件
修复了 |
|
bcfdf73这个解决方案有问题，我再看看怎么改 |
|
现在在短对话间切换，也出现skeleton一闪而过（本身加载速度就很快了，其实不需要skeleton。 有没有可能判断下条数，条数较少的就不显示skeleton了 |
消息条数也不可靠😂有的消息很长，包含大量 mcp 调用、代码、图片，渲染一个比渲染好几个纯文字的时间还长 |
|
给skeleton设置一个最小显示时间？这样不会闪，但总是要显示一小段时间 |
把延时显示和最小显示时间都加上吧。 延时显示，试试200ms。超过这个时间数据未好，则显示skeleton。 实际值要测试看看肉眼效果，目标是让人觉得自然而不闪 |
This reverts commit bcfdf73.
优化消息加载逻辑，通过添加pendingCount状态跟踪处理次数，避免首次渲染时的UI闪烁
添加骨架屏延迟显示功能，当加载时间小于SKELETON_DELAY_TIME时直接显示内容，否则延迟显示骨架屏
按你说的做了一版，感觉体验怪怪的。时间还得调整一下 |
对，要肉眼细调一下 |
EurFelux
changed the title
调整skeleton显示时间与显示skeleton的延时； 调整渲染内容
将骨架屏最小显示时间从300ms减少到150ms 移除首次渲染的特殊处理逻辑，统一使用骨架屏状态控制
|
是否要考虑基于简洁和气泡两种消息样式的骨架 |
考虑过，觉得不是很有必要 |
将状态变量maxHeight重命名为height以更准确反映用途 移除click触发方式并调整悬浮延迟 修改PopoverContent样式为flex布局并使用height属性
What this PR does
由于现在应用常有渲染卡顿的问题，同时渲染速度不是很好优化，计划使用skeleton优化组件渲染过程的用户体验
在长对话场景下，切换page的响应速度能达到原来的两倍左右。（⬅️开发，➡️生产，同一话题数据）
感觉开发环境更卡一些，生产环境应该还能更快。
相关issues：#8237 #8217
Fixes #8303
Why we need it and why it was done in this way
The following tradeoffs were made:
悬浮窗如果不设置一个固定的height，话题的虚拟列表就无法正常加载。设置固定height会导致话题少的时候整个悬浮窗还是挺高，不能适应内容。
The following alternatives were considered:
Links to places where the discussion took place:
Breaking changes
If this PR introduces breaking changes, please describe the changes and the impact on users.
Special notes for your reviewer
Checklist
This checklist is not enforcing, but it's a reminder of items that could be relevant to every PR.
Approvers are expected to review this list.
Release note