HomePhabricator

[Cashtab] Debounce scroll event handler

Description

[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.

Reviewers: #bitcoin_abc, emack

Reviewed By: #bitcoin_abc, emack

Differential Revision: https://reviews.bitcoinabc.org/D15973

Details

Provenance
bytesofmanAuthored on Apr 14 2024, 13:59
bytesofmanPushed on Apr 16 2024, 16:28
Reviewer
Restricted Project
Differential Revision
D15973: [Cashtab] Debounce scroll event handler
Parents
rABC88ea3ea9d12e: [electrum] fix flaky tear-down in functional tests
Branches
Unknown
Tags
Unknown