Page MenuHomePhabricator

[Cashtab] Debounce scroll event handler
ClosedPublic

Authored by bytesofman on Apr 14 2024, 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
Branch
debounce-scroll-listener
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 28598
Build 56737: Build Diffcashtab-tests
Build 56736: arc lint + arc unit

Event Timeline

bytesofman edited the test plan for this revision. (Show Details)
This revision is now accepted and ready to land.Apr 15 2024, 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.