refactor: dont use `useEffect` anymore to control thread scroll #35818

ggazzo · 2025-04-16T03:41:11Z

https://rocketchat.atlassian.net/browse/ARCH-1580

Everything started with a flaky test and some reports that the scrolling was behaving strangely. Then it was realized that the control of the scrolls was erratic and not reliable in terms of repetitive testing. Therefore, a refactor was necessary.

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

This pull request refactors the thread scrolling mechanism in the Rocket.Chat application. The changes include:

Updating MessageListContext to use MutableRefObject instead of RefObject for messageListRef, enhancing reference management flexibility.
Refactoring the useJumpToMessage hook to incorporate a useSafeRefCallback and an IntersectionObserver for improved message scrolling and highlighting.
Refining type imports and the messageListRef type definition in the MessageListProvider component.
Modifying the type of innerBoxRef from HTMLDivElement to HTMLElement in RoomBody.tsx and RoomBodyV2.tsx, initializing it with undefined instead of null.
Simplifying the ThreadMessageList component by removing unused imports and optimizing the use of refs for scrolling and navigation.
Introducing a new hook, useLegacyThreadMessageListScrolling, to manage legacy thread message list scrolling with added functionality for throttling scroll actions and using safe ref callbacks.

These changes aim to improve the efficiency and reliability of thread navigation and scrolling within the application.

…ling by removing onScroll

dionisio-bot · 2025-04-16T03:41:16Z

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

changeset-bot · 2025-04-16T03:41:16Z

⚠️ No Changeset found

Latest commit: 0725e16

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

kodus-ai · 2025-04-16T03:49:35Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

apps/meteor/client/components/message/list/MessageListContext.tsx

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

apps/meteor/client/components/message/list/MessageListContext.tsx

codecov · 2025-04-16T04:03:09Z

Codecov Report

Attention: Patch coverage is 90.90909% with 3 lines in your changes missing coverage. Please review.

Project coverage is 60.95%. Comparing base (00b75e3) to head (0725e16).
Report is 4 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #35818      +/-   ##
===========================================
- Coverage    60.96%   60.95%   -0.02%     
===========================================
  Files         2952     2952              
  Lines        70308    70286      -22     
  Branches     16137    16135       -2     
===========================================
- Hits         42866    42844      -22     
+ Misses       24495    24493       -2     
- Partials      2947     2949       +2

Flag	Coverage Δ
e2e	`57.62% <90.90%> (-0.03%)`	⬇️
unit	`75.49% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-04-16T04:03:18Z

PR Preview Action v1.6.1
🚀 View preview at https://RocketChat.github.io/Rocket.Chat/pr-preview/pr-35818/
Built to branch `gh-pages` at 2025-04-16 19:36 UTC. Preview will be ready when the GitHub Pages deployment is complete.

…lement in RoomBody components refactor: remove unused useRef import in ThreadMessageList component

…nto fix/thread-jump

kodus-ai · 2025-04-16T04:35:24Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

apps/meteor/client/views/room/body/RoomBodyV2.tsx

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

kodus-ai · 2025-04-16T05:09:02Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

apps/meteor/client/views/room/body/RoomBody.tsx

apps/meteor/client/views/room/body/RoomBodyV2.tsx

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts

kodus-ai · 2025-04-16T06:39:46Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

kodus-ai · 2025-04-16T13:05:15Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

kodus-ai · 2025-04-16T13:43:08Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

kodus-ai · 2025-04-16T13:52:02Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

…nto fix/thread-jump

kodus-ai · 2025-04-16T15:22:14Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

apps/meteor/client/views/room/body/hooks/useRestoreScrollPosition.ts

kodus-ai · 2025-04-16T17:16:47Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

apps/meteor/client/views/room/body/RoomBodyV2.tsx

kodus-ai · 2025-04-16T19:23:46Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

juliajforesti · 2025-04-16T22:04:05Z

tested and looks all good

ggazzo added 3 commits April 15, 2025 21:34

dont use effect anymore to control thread scroll

2fd5569

refactor: simplify scrolling logic in useLegacyThreadMessageListScrol…

50e28b1

…ling by removing onScroll

refactor: invert ref logic dependency list x items to scroll

ba042b0

ggazzo commented Apr 16, 2025

View reviewed changes

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts Outdated Show resolved Hide resolved

ggazzo commented Apr 16, 2025

View reviewed changes

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

24a4af7

kodus-ai bot reviewed Apr 16, 2025

View reviewed changes

.../meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts Outdated Show resolved Hide resolved

kodus-ai bot reviewed Apr 16, 2025

View reviewed changes

apps/meteor/client/components/message/list/MessageListContext.tsx Show resolved Hide resolved

kodus-ai bot reviewed Apr 16, 2025

View reviewed changes

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts Show resolved Hide resolved