-
Notifications
You must be signed in to change notification settings - Fork 45
[CLNP-7468] fix: resolve search item scroll issue #256
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #256 +/- ##
==========================================
- Coverage 11.26% 11.22% -0.05%
==========================================
Files 360 360
Lines 8680 8714 +34
Branches 2332 2343 +11
==========================================
Hits 978 978
- Misses 7701 7735 +34
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR resolves a search item scroll issue by implementing a new lazy scrolling mechanism for message lists. The fix introduces asynchronous scrolling to prevent timing issues when scrolling to specific messages before data rendering has been committed.
- Adds a new
lazyScrollToMessageIdfunction for scrolling to messages by ID with proper timing - Replaces index-based scrolling with message ID-based scrolling for search functionality
- Implements throttling logic for bottom-reached events to prevent excessive API calls during scrolling
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| types.ts | Defines the TypeScript interface for the new lazyScrollToMessageId function |
| moduleContext.tsx | Implements the lazyScrollToMessageId function and integrates it into the scroll actions hook |
| GroupChannelMessageList.tsx | Updates message list to use the new scrolling method and adds bottom-reached throttling |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx
Show resolved
Hide resolved
packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx
Show resolved
Hide resolved
| setTimeout(() => { | ||
| let messageIndex = 0; | ||
| if (params?.messageId) { | ||
| const foundMessageIndex = messagesRef.current.findIndex((it) => it.messageId === params.messageId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이건 첫 데이터 로드에서 찾은 index 는 스크롤로 가는 도중에 load more 등으로 리스트가 업데이트 되면
index 가 바뀌니, ref 를 사용해서 해당 시점의 messages 스냅샷에서 정확한 index 를 찾아서 이동하는것 맞을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네 현재 상태에서는 onBottomReached 가 loadNext를 호출하면서 문제가 발생하고있습니다. 어떤 경우라도 messages 가 변경되었다면 현재 messages 기준으로 인덱스를 다시 찾아야 스크롤 처리해주는게 기대 동작일것 같습니다
bang9
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm! 고생하셨습니다.
External Contributions
This project is not yet set up to accept pull requests from external contributors.
If you have a pull request that you believe should be accepted, please contact
the Developer Relations team [email protected] with details
and we'll evaluate if we can setup a CLA to allow for the contribution.
For Internal Contributors
[CLNP-7468](https://sendbird.atlassian.net/browse/CLNP-7468)
Description Of Changes
search item 을 이용하여 groupChannel 진입시 lazyScrollToIndex를 이용하여 스크롤 처리를 하는데 다음과 같은 문제가 있습니다
해결방법
search item 을 이용해서 scroll 이 필요할때 lazyScrollToIndex 말고 messageId를 이용 해서 스크롤 순간에 index를 찾도록 수정
FlatList 내부 조건에 의해 onBottomReached 가 호출될때 hasNext 와 search item을 이용한 스크롤 중인지 체크해서 처리
Types Of Changes
What types of changes does your code introduce to this project?
Put an
xin the boxes that apply_