Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: peopleList performance problem #3642

Merged
merged 7 commits into from
Jul 16, 2021
Merged

Conversation

nuanyang233
Copy link
Collaborator

close #3634

This will cause the page to crash when users open the recipients' dialog with huge contacts data. So I added virtual lists and conditional rendering of ListItem.

Before

before

After

after

Comment on lines +44 to +49

if (isGroup(props.item))
return (
<ListItem button disabled={disabled} onClick={onClick} {...listItemProps}>
<GroupListItemContent group={props.item} showAtNetwork={showAtNetwork} />
</ListItem>
Copy link
Collaborator Author

@nuanyang233 nuanyang233 Jul 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me explain here. Because GroupListItem needs to call useNickNamesFromList and useResolveSpecialGroupName. But there are time-consuming operations in these hooks. But the reality is that there are not a lot of Groups. So I extract it to the GroupListItemContent component and added a conditional judgment to reduce unnecessary waste.

image

@nuanyang233
Copy link
Collaborator Author

There was still a problem: when the user clicked select all, it would cause a crash. (Too many tags need to create)

Maybe we can change the design here. for example, select all just is an ALL tag, CC @xiazhiming @guanbinrui

@nuanyang233 nuanyang233 marked this pull request as draft July 9, 2021 16:05
Jack-Works
Jack-Works previously approved these changes Jul 12, 2021
@nuanyang233 nuanyang233 changed the title fix: peopleList performance problem wip: peopleList performance problem Jul 12, 2021
@nuanyang233
Copy link
Collaborator Author

There was still a problem: when the user clicked select all, it would cause a crash. (Too many tags need to create)

Maybe we can change the design here. for example, select all just is an ALL tag, CC @xiazhiming @guanbinrui

I will replace the select all behavior to add an All tag.

@nuanyang233 nuanyang233 marked this pull request as ready for review July 15, 2021 08:41
@nuanyang233 nuanyang233 changed the title wip: peopleList performance problem fix: peopleList performance problem Jul 15, 2021
@guanbinrui guanbinrui merged commit 5b8421c into develop Jul 16, 2021
@guanbinrui guanbinrui deleted the fix/recipt-performance branch July 16, 2021 03:33
guanbinrui added a commit that referenced this pull request Jul 16, 2021
* refactor: people list render

* feat: add all friends tag

* refactor: move database tasks to background tasks

* fix: bugfix

* refactor: error message

Co-authored-by: Jack Works <jackworks@protonmail.com>
Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
yanzhihong23 added a commit that referenced this pull request Jul 16, 2021
* develop: (41 commits)
  fix: peopleList performance problem (#3642)
  fix: claim status (#3694)
  fix(Wallet): do not open the WalletStatusDialog after switching network (#3681)
  chore: remove bsc swapper (#3680)
  fix: show token icon in transaction list and show balance in token list (#3684)
  chore: clean docs (#3685)
  docs: rewrite plugin dev doc (#3673)
  fix(build): watcher of webpack watches too many files including output files and files in node_modules (#3682)
  fix: the link for viewing pair analytics in swap dialog link to a broken page (#3683)
  feat: add i18n support in plugin infra (#3661)
  refactor: chain detailed (#3679)
  fix: token address (#3678)
  chore: remove notistack patch (#3666)
  fix: enable plugins on app (#3660)
  feat: red packet confirm dialog (#3633)
  feat: ito use tokens detail (#3665)
  fix: rp image pre text (#3668)
  feat: introduce react-hook-form (#3632)
  fix: add token into DB (#3662)
  fix: lint error
  ...
yanzhihong23 added a commit that referenced this pull request Jul 21, 2021
* develop: (97 commits)
  fix: unable to switch to network (#3716)
  fix: can't access property "querySelector", parentEle is null (#3714)
  feat: support switch plugin on or off (#3667)
  docs: add how to reg plugin (#3715)
  chore: remove `patch-package` blob file (#3707)
  chore: update rpc for matic (#3695)
  chore: remove unused code (#3704)
  fix: some token not present in the tx history list
  fix: not show token list in swap (#3697)
  fix: force react not to react dom node
  fix: deselect token if keyword changed
  chore: remove unused code
  chore: bump version to 1.34.1
  fix: show token icon in transaction list and show balance in token list (#3684)
  fix: list all assets
  fix: currency symbol
  fix: no sent transactions
  fix: peopleList performance problem (#3642)
  fix: claim status (#3694)
  fix(Wallet): do not open the WalletStatusDialog after switching network (#3681)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] Unable to add receipt with huge contacts (more than 2k)
3 participants