Repository navigation
Commit dd40f58
authored
fix(InfiniteScrollPaginator): check the edges on resize in the next frame (#3357)
Ticket: https://linear.app/stream/issue/REACT-1469
### Goal
Every page load of a v15 app whose channel list grows with its content
reports `ResizeObserver loop completed with undelivered notifications`.
Under CRA / webpack-dev-server this becomes a full-screen "Uncaught
runtime errors" overlay that blocks clicks. It was found while migrating
the team-ts and social-messenger-ts demos in website-react-examples to
15.0.0-rc.3 (GetStream/website-react-examples#138), and does not happen
on v14.
### Root cause
`InfiniteScrollPaginator` observes its root with a ResizeObserver and
checks the distance to the edges on every resize. #3342 changed that
check from a trailing `debounce` (always async) to a leading `throttle`,
so the observer's first callback now calls `loadNextOnScrollToBottom`
synchronously. The page load updates a `StateStore`, and the
`useSyncExternalStore` subscription renders synchronously in the
callback's microtasks. When the root is sized by its content (team-ts's
channel lists are), the root grows within the same ResizeObserver
delivery. The browser cannot deliver that resize in the same frame and
reports the loop error.
### How it was isolated
I ran a copy of team-ts against the rc.3 build with
`window.ResizeObserver` wrapped from a module imported first. The
wrapper recorded every callback's targets per animation frame and which
observed elements changed size during the callback and its microtasks.
The error appeared on 2 of 2 loads. Only the paginator's callback ever
resized an observed element: the channel list root went from 240x111 to
240x132 within its own callback, and the next frame delivered 240x132.
The `MessageList` relayout observer,
`useFloatingDateSeparatorMessageList` and `useScrollLocationLogic` never
resized an observed element.
### Implementation details
- The observer callback now schedules the check with
`requestAnimationFrame`, at most once per frame, and the frame is
cancelled on unmount. The resize the loaded page causes is then observed
in the following frame instead of within the current delivery.
- Scroll-triggered checks are unchanged and still run immediately.
- New tests in `InfiniteScrollPaginator.test.tsx` cover: no check inside
the observer callback (the check runs in the next frame), one check for
several resizes in a frame, and a pending check dropped when the
observer is replaced. Each fails when the code it covers is removed (the
deferral, the per-frame guard, the cancel in the cleanup).
Verified: with a local build of this branch in the same team-ts copy,
there was no loop error on 5 of 5 loads, and no observer callback
resized an observed element. `yarn lint`, `tsc -p tsconfig.lib.json
--noEmit` and `yarn test` (3,300 tests) pass.
Related: REACT-1439 (a content-height `ChannelList` loads every page on
mount). This PR does not change that behavior; it only moves the load
out of the observer callback.
### UI Changes
None visible, apart from the dev-server error overlay no longer
appearing.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
<!-- coderabbit-ai-generated:v1 -->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved infinite-scroll behavior when content is resized: edge checks
now run on the next frame, and repeated resize events within that frame
trigger only one check.
* Pending checks are discarded when the observer configuration changes
or the component is cleaned up.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->1 parent cf7a9f1 commit dd40f58
2 files changed
Lines changed: 84 additions & 4 deletions
File tree
- src/components/InfiniteScrollPaginator
- __tests__
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
179 | 179 | | |
180 | 180 | | |
181 | 181 | | |
182 | | - | |
183 | | - | |
| 182 | + | |
| 183 | + | |
| 184 | + | |
| 185 | + | |
| 186 | + | |
| 187 | + | |
| 188 | + | |
| 189 | + | |
| 190 | + | |
| 191 | + | |
| 192 | + | |
| 193 | + | |
| 194 | + | |
| 195 | + | |
184 | 196 | | |
185 | 197 | | |
186 | 198 | | |
187 | 199 | | |
| 200 | + | |
188 | 201 | | |
189 | 202 | | |
190 | 203 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
2 | 2 | | |
3 | 3 | | |
4 | 4 | | |
| 5 | + | |
5 | 6 | | |
6 | 7 | | |
7 | 8 | | |
| |||
46 | 47 | | |
47 | 48 | | |
48 | 49 | | |
49 | | - | |
| 50 | + | |
50 | 51 | | |
51 | 52 | | |
52 | 53 | | |
53 | 54 | | |
54 | 55 | | |
55 | 56 | | |
56 | | - | |
| 57 | + | |
57 | 58 | | |
58 | 59 | | |
59 | 60 | | |
| |||
64 | 65 | | |
65 | 66 | | |
66 | 67 | | |
| 68 | + | |
| 69 | + | |
67 | 70 | | |
68 | 71 | | |
69 | 72 | | |
| |||
156 | 159 | | |
157 | 160 | | |
158 | 161 | | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
| 169 | + | |
| 170 | + | |
| 171 | + | |
| 172 | + | |
| 173 | + | |
| 174 | + | |
| 175 | + | |
| 176 | + | |
| 177 | + | |
| 178 | + | |
| 179 | + | |
| 180 | + | |
| 181 | + | |
| 182 | + | |
| 183 | + | |
| 184 | + | |
| 185 | + | |
| 186 | + | |
| 187 | + | |
| 188 | + | |
| 189 | + | |
| 190 | + | |
| 191 | + | |
| 192 | + | |
| 193 | + | |
| 194 | + | |
| 195 | + | |
| 196 | + | |
| 197 | + | |
| 198 | + | |
| 199 | + | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | + | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
| 209 | + | |
| 210 | + | |
| 211 | + | |
| 212 | + | |
| 213 | + | |
| 214 | + | |
| 215 | + | |
| 216 | + | |
| 217 | + | |
| 218 | + | |
| 219 | + | |
| 220 | + | |
| 221 | + | |
| 222 | + | |
| 223 | + | |
| 224 | + | |
| 225 | + | |
159 | 226 | | |
160 | 227 | | |
161 | 228 | | |
| |||
0 commit comments