Page MenuHomePhabricator

[Cashtab] Debounce wallet select
ClosedPublic

Authored by bytesofman on May 6 2024, 23:47.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABCca211dd7bc45: [Cashtab] Debounce wallet select
Summary

T3566

Debounce the wallet select function

Ref https://www.carlrippon.com/using-lodash-debounce-with-react-and-ts/ on the implementation

Test Plan

npm test

npm start or visit https://cashtab-local-dev.netlify.app/ and rapidly switch between wallets. Note the bug in the T3566 video is not repeated.

Diff Detail

Repository
rABC Bitcoin ABC
Branch
wallet-switch-debounce
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 28926
Build 57389: Build Diffcashtab-tests
Build 57388: arc lint + arc unit

Event Timeline

Tail of the build log:

Installing mock-chronik-client dependencies...
/work/modules/mock-chronik-client /work/abc-ci-builds/cashtab-tests

added 236 packages, and audited 237 packages in 1s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
/work/cashtab /work/modules/mock-chronik-client /work/abc-ci-builds/cashtab-tests

added 1656 packages, and audited 1657 packages in 26s

261 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> cashtab@2.38.4 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

[eslint] 
src/components/Common/WalletLabel.js
  Line 70:11:   'handleSelectWallet' is assigned a value but never used           no-unused-vars
  Line 98:11:   'debouncedUpdateCashtabState' is assigned a value but never used  no-unused-vars
  Line 99:45:   'walletsAfterActivation' is not defined                           no-undef
  Line 108:32:  'debouncedHandleSelectWallet' is not defined                      no-undef

Search for the keywords to learn more about each error.


Build cashtab-tests failed with exit code 1

remove debug log, get implementation to work for dropdown select

define with useRef so it is not redefined on every re-render

bytesofman edited the test plan for this revision. (Show Details)
bytesofman published this revision for review.May 7 2024, 17:20
emack requested changes to this revision.May 8 2024, 02:46
emack added a subscriber: emack.

We already have an implementation of this in the Alias codebase, what additional benefit do you get from using this library to achieve this?

This revision now requires changes to proceed.May 8 2024, 02:46

We already have an implementation of this in the Alias codebase, what additional benefit do you get from using this library to achieve this?

different use case and different implementation. In this case, we are not making any API calls, and we are not trying to just call "after the user is finished typing."

We just want to not call the function too many times if for some reason the select menu is being rapidly cycled.

The lib is small (we only install one function), and already in place in Cashtab (used to debounce onScroll event for the minified header). lodash debounce is one of the "standard" ways to implement debounce. It's nice to have a standard implementation because we could (as we do now) implement it in lots of places in Cashtab...and optimizing debounce methods is the kind of thing we would rather not reinvent. imo better to use a lib.

Debounces all ok on mobile and desktop 👍

This revision is now accepted and ready to land.May 8 2024, 03:02
This revision was automatically updated to reflect the committed changes.