Skip to content

fix(MessageList): prevent message pagination too early on mount#3143

Merged
MartinCupela merged 4 commits intomasterfrom
fix/prevent-message-list-pagination-too-early-on-mount
Apr 28, 2026
Merged

fix(MessageList): prevent message pagination too early on mount#3143
MartinCupela merged 4 commits intomasterfrom
fix/prevent-message-list-pagination-too-early-on-mount

Conversation

@MartinCupela
Copy link
Copy Markdown
Contributor

@MartinCupela MartinCupela commented Apr 24, 2026

🎯 Goal

Prevent pagination while the MessageList content is being mounted with the initial page content

It solves a threshold/race issue where:

  • At viewport height 941px, message list bottom offset is 250, so no extra pagination fires; list stays at bottom.
  • At viewport height 942px, bottom offset becomes 249, which is < 250, so reverse infinite-scroll treats it as β€œnear top” and auto-loads older messages.

Root cause: A race condition between three systems during mount:

  • InfiniteScroll fires loadPreviousPage() via its deferred rAF check when scrollTop=0 < threshold(250) β€” this is legitimate when content fits the viewport (sH=cH, no overflow before fonts fully load)
  • Settle pass scrolls to bottom at 80ms once the layout stabilizes and overflow appears
  • useMessageListScrollManager reads the stale cached scrollTop.current=0 ref when loadingMore becomes true, concludes the user was "at the absolute top," and sets stick-to-top mode
  • When prepended messages arrive, stick-to-top β†’ scrollTop=0 β†’ jumps to top
  • The settle pass re-runs but sees initialDistanceToBottom > scrolledUpThreshold β†’ bails β†’ stays at top

Fix: Two changes in useMessageListScrollManager:

  1. When determining the older-pagination restoration mode, read the live DOM scrollTop via scrollContainerMeasures() instead of the stale cached ref (which may not have been updated if the scroll event from scrollToBottom() hasn't fired yet)
  2. When the container has no overflow (scrollHeight ≀ offsetHeight), default to idle mode instead of stick-to-top, because the scroll position is meaningless in a non-scrollable container

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 24, 2026

Size Change: +112 B (+0.02%)

Total Size: 672 kB

πŸ“¦ View Changed
Filename Size Change
dist/cjs/index.js 267 kB +51 B (+0.02%)
dist/es/index.mjs 265 kB +61 B (+0.02%)
ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.32 kB
dist/cjs/emojis.js 3.01 kB
dist/cjs/mp3-encoder.js 1.27 kB
dist/cjs/useNotificationApi.js 45.4 kB
dist/css/emoji-picker.css 178 B
dist/css/emoji-replacement.css 456 B
dist/css/index.css 39.3 kB
dist/es/audioProcessing.mjs 1.31 kB
dist/es/emojis.mjs 2.52 kB
dist/es/mp3-encoder.mjs 756 B
dist/es/useNotificationApi.mjs 45.2 kB

compressed-size-action

@MartinCupela MartinCupela force-pushed the fix/prevent-message-list-pagination-too-early-on-mount branch from cec03d9 to 816d9a5 Compare April 28, 2026 15:04
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 28, 2026

Codecov Report

❌ Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.
βœ… Project coverage is 82.84%. Comparing base (deda536) to head (816d9a5).
⚠️ Report is 15 commits behind head on master.

Files with missing lines Patch % Lines
...t/hooks/MessageList/useMessageListScrollManager.ts 85.71% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3143      +/-   ##
==========================================
+ Coverage   82.79%   82.84%   +0.05%     
==========================================
  Files         419      419              
  Lines       12270    12278       +8     
  Branches     3951     3953       +2     
==========================================
+ Hits        10159    10172      +13     
+ Misses       2111     2106       -5     

β˜” View full report in Codecov by Sentry.
πŸ“’ Have feedback on the report? Share it here.

πŸš€ 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.

@MartinCupela MartinCupela merged commit 12e282f into master Apr 28, 2026
8 checks passed
@MartinCupela MartinCupela deleted the fix/prevent-message-list-pagination-too-early-on-mount branch April 28, 2026 15:09
github-actions Bot pushed a commit that referenced this pull request May 4, 2026
## [14.1.0](v14.0.1...v14.1.0) (2026-05-04)

### Bug Fixes

* add ScrollToLatestMessageButton to ComponentContext ([#3159](#3159)) ([952c125](952c125))
* allow user blocking only in DM-type channels ([#3139](#3139)) ([deda536](deda536))
* decouple msg bubble width from reaction list width ([#3142](#3142)) ([980c233](980c233))
* export AttachmentSelectorContext from the SDK ([#3158](#3158)) ([68efeb5](68efeb5))
* font & box shadow fixes ([#3135](#3135)) ([6d04cdf](6d04cdf)), closes [#3134](#3134)
* limit reactions host width (segmented/bottom) ([#3154](#3154)) ([be50105](be50105))
* make search results scrollable ([#3152](#3152)) ([ead6cb5](ead6cb5))
* **MessageList:** prevent message pagination too early on mount ([#3143](#3143)) ([12e282f](12e282f))
* prevent cutting off button outlines in ContextMenu components ([#3151](#3151)) ([b3469f0](b3469f0))
* remove scrollbar gutters from VML ([#3148](#3148)) ([4a6a8ae](4a6a8ae))

### Features

* **a11y:** improve accessibility across dialogs, forms, menus, media, and focus flows ([#3146](#3146)) ([917b7f5](917b7f5))
* change textarea default placeholder text ([#3150](#3150)) ([45b1836](45b1836))
* introduce `MessageUI` to `ComponentContext` ([#3140](#3140)) ([16af18d](16af18d))

### Refactors

* message styling ([#3136](#3136)) ([cd3a9c0](cd3a9c0))
@stream-ci-bot
Copy link
Copy Markdown

πŸŽ‰ This PR is included in version 14.1.0 πŸŽ‰

The release is available on:

Your semantic-release bot πŸ“¦πŸš€

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants