MetaMask / MetaMask/metamask-mobile

performance: Improve the Performance of AvatarAccount

Open
#16,869 3 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
area-performance team-design-system
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### What is this about?

Our team did extensive research into the account lists poor performance. There are several reasons for this but one isolated issues was poor performance of the AvatarAccount component. Below you can see that it takes upwards of 9ms to render each AvatarAccount. It also seems like the AvatarAccount is not properly cached since this we saw similar render times across multi re renders.

Image

Perhaps we could improve the cacheing of this component (and the images) such that we get faster loads.

### Scenario

_No response_

### Design

_No response_

### Technical Details

- run the app with in debug mode with the profiler enabled
- import an SRP with lots of accounts
- start profiler in dev tools
- open the account list
- stop profiler
- look at render times for AvatarAccount
- notice that the render times to not seem to improve across re renders.

### Threat Modeling Framework

_No response_

### Acceptance Criteria

_No response_

### Stakeholder review needed before the work gets merged

- [x] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.