Improving detection of scroll ended #742

gnbaron · 2017-07-17T18:59:33Z

We are facing some issues like #697 #722 #322 #564 and few others, reporting that there is a problem related to the detection of scroll ended.

Like some people already said in this kind of issue, this is happening because the browser is delaying the setTimeout callback on _debounceScrollEnded in exchange of performance reasons.

This is a proposal to fix this kind of problems using requestAnimationFrame instead of setTimeout and it works fine for me.

This PR includes:

Using requestAnimationFrame instead of setTimeout in Grid component and Masonry component.
Fixing jest setup to polyfill requestAnimationFrame and cancelAnimationFrame.
Change a Masonry test to wait before all "animations" finish before assert the result. (I did it with a setTimeout callback because jest.runOnlyPendingTimers() does not wait a task scheduled with requestAnimationFrame, and this kind of task have priority for setTimeout "tasks", so the assert expression will be executed only after _debounceScrollEnded was called).

…debounce scroll callback will be executed in the expected time.

…mationFrame. setTimout with zero delay was used in Masonry test to wait tasks of requestAnimationFrame finish before assert the result.

bvaughn

This looks great! I look forward to testing it after work.

bvaughn · 2017-07-17T19:41:17Z

source/Grid/Grid.js

-      scrollingResetTimeInterval
-    )
+    const delay = () => {
+      if (Date.now() - this._scrollDebounceStart >= this.props.scrollingResetTimeInterval) {


We could assign scrollingResetTimeInterval to a local variable and avoid the this.props. lookup chain.

bvaughn · 2017-07-17T19:43:04Z

Hm, looks like there are some conflicts. Try rebasing?

…debounce scroll callback will be executed in the expected time.

…mationFrame. setTimout with zero delay was used in Masonry test to wait tasks of requestAnimationFrame finish before assert the result.

…irtualized

gnbaron

Sorry, It's rebased.

gnbaron · 2017-07-17T20:07:01Z

source/Grid/Grid.js

-      scrollingResetTimeInterval
-    )
+    const delay = () => {
+      if (Date.now() - this._scrollDebounceStart >= this.props.scrollingResetTimeInterval) {


bvaughn · 2017-07-18T01:25:27Z

Excellent! Thank you! 😄

I'm going to hold off on merging this until #743 has been merged since that PR is pretty complicated and I don't want to cause any conflicts. Stay tuned!

TrySound · 2017-07-19T23:34:40Z

source/Grid/Grid.js

-      this._debounceScrollEndedCallback,
-      scrollingResetTimeInterval
-    );
+    const delay = () => {


Allocating function on every scroll event can slow down performance.

TrySound · 2017-07-20T14:09:51Z

source/Grid/Grid.js

+   * Check if the difference between current time and the last scroll ended event is greater.
+   * than the scrollingResetTimeInterval prop, else schedule this function to execute again.
+   */
+  _delayScrollEnded() {


Conflict can be solved If you will use class property here instead of bind

_delayScrollEnded = () => {

Yes, I'm merging right now.
I was just getting a coffee 😄

gnbaron · 2017-07-20T19:00:26Z

I did the merge with these last changes on Grid component, but after the merge of this commit, the build is broken:

...
source/Grid/Grid.jest.js -> dist/commonjs/Grid/Grid.jest.js
TypeError: source/Grid/Grid.js: Property value expected type of string but got null
    at Object.validate (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-types/lib/definitions/index.js:161:13)
    at validate (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-types/lib/index.js:505:9)
    at Object.builder (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-types/lib/index.js:466:7)
    at PluginPass.ObjectExpression (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-plugin-transform-es2015-duplicate-keys/lib/index.js:65:26)
    at newFn (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/home/guilherme/dev/js/test/react-virtualized/node_modules/babel-traverse/lib/index.js:114:17)

It is weird because no one warning or error was reported from flow or eslint.
I tried to checkout the master branch without my changes, but the problem already happens.

What do you think?

TrySound · 2017-07-20T19:01:42Z

I guess it's https://github.com/brigand/babel-plugin-flow-react-proptypes bug

TrySound · 2017-07-20T19:33:05Z

brigand/babel-plugin-flow-react-proptypes#118

bvaughn · 2017-07-21T01:37:44Z

Although tests pass, this branch prints a bunch of warnings not present in master:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Grid component.

bvaughn · 2017-07-21T01:40:12Z

source/Grid/Grid.js

+  _delayScrollEnded = () => {
+    const { scrollingResetTimeInterval } = this.props;
+    if (Date.now() - this._scrollDebounceStart >= scrollingResetTimeInterval) {
+      this._debounceScrollEndedCallback();


minor nit: I realize we weren't doing this before, and it's no big deal, but we might as well clear this._disablePointerEventsTimeoutId here.

Yes, I agree that the pointer must be cleared, but this hasn't been doing on _debounceScrollEndedCallback function?

You're right 😄 Sorry, I was just skimming the diff and that callback wasn't visible. Sorry~ 👍

bvaughn · 2017-07-21T01:40:34Z

source/Masonry/Masonry.js

    const { scrollingResetTimeInterval } = this.props;
+    if (Date.now() - this._scrollDebounceStart >= scrollingResetTimeInterval) {
+      this._debounceScrollEndedCallback();


Ditto as for Grid

jaredLunde · 2017-08-09T02:22:56Z

@bvaughn @guilhermefloriani

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Grid component.

I'd guess that error is occurring because the following two lines should be window.cancelAnimationFrame rather than window.clearTimeout

…unt.

gnbaron · 2017-08-09T11:56:00Z

Nice @jaredLunde, now seems to be ok, the warnings not show up.
Sorry everyone, I didn't had time to work on this.

jaredLunde · 2017-08-09T17:09:15Z

One last place requestAnimationFrame needs to replace setTimeout is in the WindowLoader -> onScroll util. I have done so in a local branch and also replaced this kind of pattern which gets used multiple times with requestAnimationTimeout and cancelAnimationTimeout functions:

    const delay = () => {
      if (Date.now() - this._scrollDebounceStart >= this.props.scrollingResetTimeInterval) {
        this._debounceScrollEndedCallback()
      } else {
        this._disablePointerEventsTimeoutId = window.requestAnimationFrame(delay)
      }
    }

    this._scrollDebounceStart = Date.now()
    this._disablePointerEventsTimeoutId = window.requestAnimationFrame(delay)

So this code snippet is reduced to:

   this._disablePointerEventsTimeoutId = requestAnimationTimeout(
      this._debounceScrollEndedCallback, 
      this.props.scrollingResetTimeInterval
    )

And window.cancelAnimationFrame(...) becomes cancelAnimationTimeout(...). This also removes the need for a _scrollDebounceStart property.

What's going to be the easiest way to review those changes? Does it make more sense to submit a separate PR altogether with this master branch or to submit a PR to @guilhermefloriani's branch?

bvaughn · 2017-08-09T18:08:47Z

Up to you 2 to work out. @guilhermefloriani could give you push access to his fork of RV and you could make your changes directly to it.

gnbaron · 2017-08-09T18:11:01Z

I sent an invite to him.

… requestAnimationFrame This update also replaces setTimeout/clearTimeout in the WindowScroller component with the requestAnimationFrame-based timeout function.

TrySound · 2017-08-10T06:30:21Z

source/WindowScroller/utils/onScroll.js

@@ -1,3 +1,9 @@
+import requestAnimationTimeout, {
+  cancelAnimationTimeout
+} from '../../utils/requestAnimationTimeout'


Looks a bit weird. Maybe better to use only named exports? And then filename can be changed to animationTimeout.js

TrySound · 2017-08-10T06:33:27Z

source/WindowScroller/utils/onScroll.js

+} from '../../utils/requestAnimationTimeout'
+
+
+


To much line breaks

…nTimeout.

bvaughn · 2017-08-18T22:32:01Z

This looks good! Collection still uses setTimeout but I don't think that's a very commonly used component so it's probably okay to update it later.

I think the only thing remaining would be to fallback to setTimeout for browsers that don't support requestAnimationFrame (eg IE 9). I've done this via f3beee0.

Thanks for your work on this issue!

bvaughn · 2017-09-18T04:33:31Z

This feature has been released in version 9.10.0. Thank you for contributing!

peisenmann · 2018-07-03T19:47:48Z

Oh no, Collection is the one I'm using and experiencing this XD. Any odds there's a fix in the works?

gnbaron added 2 commits July 17, 2017 14:57

Using requestAnimationFrame instead of setTimeout to ensure that the …

c20bf15

…debounce scroll callback will be executed in the expected time.

Fixing tests after start to using requestAnimationFrame and cancelAni…

d534319

…mationFrame. setTimout with zero delay was used in Masonry test to wait tasks of requestAnimationFrame finish before assert the result.

bvaughn reviewed Jul 17, 2017

View reviewed changes

gnbaron added 4 commits July 17, 2017 16:55

Using requestAnimationFrame instead of setTimeout to ensure that the …

aa4bcfd

…debounce scroll callback will be executed in the expected time.

Fixing tests after start to using requestAnimationFrame and cancelAni…

a706712

…mationFrame. setTimout with zero delay was used in Masonry test to wait tasks of requestAnimationFrame finish before assert the result.

Merge branch 'master' of https://github.com/guilhermefloriani/react-v…

14678f8

…irtualized

Avoid use a chain lookup

089af39

gnbaron commented Jul 17, 2017

View reviewed changes

bvaughn mentioned this pull request Jul 19, 2017

issues/722 #745

Closed

TrySound mentioned this pull request Jul 19, 2017

Fix Chrome setTimeout throttling #722

Closed

TrySound reviewed Jul 19, 2017

View reviewed changes

Avoid allocating one function for each scroll ended callback.

3264b83

TrySound reviewed Jul 20, 2017

View reviewed changes

merge

c47959f

bvaughn requested changes Jul 21, 2017

View reviewed changes

gnbaron added 2 commits August 9, 2017 08:52

Use cancelAnimationFrame instead of clearTimeOut on componentWillUnmo…

d782956

…unt.

Merge branch 'master' of https://github.com/bvaughn/react-virtualized

a67e150

Encapsulates scroll end debouncing into a timeout function relying on…

477ac94

… requestAnimationFrame This update also replaces setTimeout/clearTimeout in the WindowScroller component with the requestAnimationFrame-based timeout function.

TrySound reviewed Aug 10, 2017

View reviewed changes

gnbaron added 2 commits August 10, 2017 09:23

Fixing pretty warnings and use just named imports for requestAnimatio…

cf2f8d0

…nTimeout.

Merge branch 'master' of https://github.com/bvaughn/react-virtualized

c2e1d93

bvaughn merged commit c2e1d93 into bvaughn:master Aug 18, 2017

bjm904 mentioned this pull request Dec 13, 2018

Improving detection of scroll ended bvaughn/react-window#106

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improving detection of scroll ended #742

Improving detection of scroll ended #742

gnbaron commented Jul 17, 2017 •

edited

Loading

bvaughn left a comment

bvaughn Jul 17, 2017

gnbaron Jul 17, 2017

bvaughn commented Jul 17, 2017

gnbaron left a comment

gnbaron Jul 17, 2017

bvaughn commented Jul 18, 2017

TrySound Jul 19, 2017

TrySound Jul 20, 2017

gnbaron Jul 20, 2017

gnbaron commented Jul 20, 2017

TrySound commented Jul 20, 2017 •

edited

Loading

TrySound commented Jul 20, 2017

bvaughn commented Jul 21, 2017

bvaughn Jul 21, 2017

gnbaron Jul 21, 2017

bvaughn Jul 21, 2017

bvaughn Jul 21, 2017

jaredLunde commented Aug 9, 2017

gnbaron commented Aug 9, 2017

jaredLunde commented Aug 9, 2017

bvaughn commented Aug 9, 2017

gnbaron commented Aug 9, 2017 •

edited

Loading

TrySound Aug 10, 2017

TrySound Aug 10, 2017

bvaughn commented Aug 18, 2017

bvaughn commented Sep 18, 2017

peisenmann commented Jul 3, 2018

Improving detection of scroll ended #742

Improving detection of scroll ended #742

Conversation

gnbaron commented Jul 17, 2017 • edited Loading

bvaughn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Jul 17, 2017

gnbaron left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Jul 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnbaron commented Jul 20, 2017

TrySound commented Jul 20, 2017 • edited Loading

TrySound commented Jul 20, 2017

bvaughn commented Jul 21, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredLunde commented Aug 9, 2017

gnbaron commented Aug 9, 2017

jaredLunde commented Aug 9, 2017

bvaughn commented Aug 9, 2017

gnbaron commented Aug 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Aug 18, 2017

bvaughn commented Sep 18, 2017

peisenmann commented Jul 3, 2018

gnbaron commented Jul 17, 2017 •

edited

Loading

TrySound commented Jul 20, 2017 •

edited

Loading

gnbaron commented Aug 9, 2017 •

edited

Loading