fix: avoid table jitter casued by changes in the first row

[yatbfm]

ref ant-design/ant-design#52418

• Bug fix

• Fixed the table jitter casued by the change of the first row height

Summary by CodeRabbit

• 新功能

  • 优化了列表滚动处理机制
  • 引入防抖功能，提升滚动性能和用户体验

• 性能改进

  • 改善了滚动事件的控制流程
  • 减少不必要的视觉抖动
  • 更智能地管理滚动状态

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
virtual-list	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 19, 2025 5:34am

[coderabbitai[bot]]

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/List.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js Error: Cannot find module '@umijs/fabric/dist/eslint' Require stack:

• /.eslintrc.js
• /node_modules/.pnpm/@[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15) at Module._load (node:internal/modules/cjs/loader:1074:27) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at require (node:internal/modules/helpers:135:16) at Object. (/.eslintrc.js:1:14) at Module._compile (node:internal/modules/cjs/loader:1546:14) at Module._extensions..js (node:internal/modules/cjs/loader:1691:10) at Module.load (node:internal/modules/cjs/loader:1317:32)

概述

演练

此次更改主要优化了 src/List.tsx 和 src/utils/debounce.ts 中的滚动处理功能。引入了一个新的防抖函数 debounce，用于更有效地管理滚动状态。在列表组件中，通过引入 isScrollingRef 引用和 toggleScrollStatus 方法，改进了滚动交互的控制流，减少了不必要的更新并提升了用户体验。

变更

文件	变更摘要
src/List.tsx	新增 isScrollingRef 引用，引入 toggleScrollStatus 防抖方法，优化滚动状态处理
src/utils/debounce.ts	新增通用防抖函数，支持延迟执行回调并重置计时器

序列图

sequenceDiagram
    participant User
    participant List
    participant ScrollHandler
    User->>List: 触发滚动
    List->>ScrollHandler: 开始滚动
    ScrollHandler-->>List: 更新滚动状态
    ScrollHandler->>List: 防抖重置状态

可能相关的 PR

• #296: 增强虚拟列表组件的滚动体验
• #299: 优化高度更新的控制流

兔子诗角

🐰 滚动如风，静如水 防抖魔法，轻轻抚 代码跳跃，用心铺 用户体验，妙无边 兔子微笑，代码如诗 🌈

Finishing Touches

• [ ] 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 97.54%. Comparing base (c2ce7ce) to head (7fa4b93).

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #301      +/-   ##
==========================================
+ Coverage   97.50%   97.54%   +0.03%     
==========================================
  Files          19       20       +1     
  Lines         802      814      +12     
  Branches      187      190       +3     
==========================================
+ Hits          782      794      +12     
  Misses         20       20              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[jinxiangqiang]

我发现这个会导致Table的分页空白

[yatbfm]

@jinxiangqiang Can you reproduce it please? I would also like to ask a question. Do you know how to debug rc-virtual-list project in ant-design? I tried to use npm link but it failed.

[jinxiangqiang]

rc-virtual-list-3.17.2.tgz You can release your own version using private repositories like Nexus, verdaccio, etc., and install the specific version through npm or your own package management tool。 You can also overwrite the files in node_modules, but you need to clear the cache, usually in node_modules/.cache

[LeeSSHH]

@jinxiangqiang Can you reproduce it please? I would also like to ask a question. Do you know how to debug rc-virtual-list project in ant-design? I tried to use npm link but it failed.

You need to clone rc-table, and link rc-virtual-list to rc-table, then link rc-table to ant-design

[yatbfm]

@jinxiangqiang Can you reproduce it please? I would also like to ask a question. Do you know how to debug rc-virtual-list project in ant-design? I tried to use npm link but it failed.

You need to clone rc-table, and link rc-virtual-list to rc-table, then link rc-table to ant-design

It doesn't work. I exectued npm link ../virtual-list in rc-table, then executed npm link ../table in ant-design. But my changes didn't work. If I run rc-table, it prompts Can't resolve 'rc-virtual-list' in 'xxx/table/src/VirtualTable'.

[yatbfm]

@jinxiangqiang Can you reproduce it please? I would also like to ask a question. Do you know how to debug rc-virtual-list project in ant-design? I tried to use npm link but it failed.

You need to clone rc-table, and link rc-virtual-list to rc-table, then link rc-table to ant-design

I'm sorry. I forgot run npm run compile before I run npm link.

[yatbfm]

我发现这个会导致Table的分页空白

You can add attribute pagination. I debugged it and there is no problem with pagination.

[jinxiangqiang]

我发现这个会导致Table的分页空白

可以添加属性pagination，我调试了一下，分页没有问题。

Yes, my problem, I copied the whole page and pasted it directly causing the difference, I pulled the latest code and changed yours more into it and now it's OK