Page MenuHomePhabricator

[Cashtab] Debounce scroll event handler
ClosedPublic

Authored by bytesofman on Sun, Apr 14, 14:01.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC14e0ca91dc16: [Cashtab] Debounce scroll event handler
Summary

T3537

Reports of noticeably slower scroll speed on some devices after adding the minified header. Older devices may struggle with the large number of events that can come from scrolling, even if the method is relatively simple.

Good practice to debounce something like a scrolle event handler. We really want to update the state on one user scroll, which may be 30 pixels in one mousewheel roll -- in this case, we do not need to call a function 30 times.

I arrived at 25ms for the timing through manual testing. At higher values, the minified header render seemed noticeably delayed. Will confirm with users who have seen the scroll slowing problem to see if this solves their issue.

The addition of the lodash debounce method only increases the bundle by 600 bytes.
npm run build outputs: 705.97 kB (+608 B)

Test Plan

npm test

This diff is live at https://cashtab-local-dev.netlify.app/

Confirm no noticed behavior impact. I will confirm with user reporting the issue that this is solved before landing the diff.

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bytesofman edited the test plan for this revision. (Show Details)
This revision is now accepted and ready to land.Mon, Apr 15, 05:47

I will confirm with user reporting the issue that this is solved before landing the diff.

Still seeing some scroll time issues withe diff. Also tried to use lodash.throttle, but did not resolve issue.

I'm not ready to give up the minified header just yet, so will keep working on it. In the meantime, it is still a method that should be debounced. So, will land this one.

This revision was automatically updated to reflect the committed changes.