[HOLD for payment 2023-12-29] [HOLD for payment 2023-11-13] [$500] Optimize SearchPage component to reduce lags when opening

[mountiny]

Coming from here

Proposal: Optimize SearchPage component to reduce lags when opening

Problem: When opening the SearchPage component using search icon or cmd+k shortcut on web, the animation is pretty laggy. This is caused mostly by OptionsListUtils.getSearchOptions which takes all reports as a param and at some point it processes it by looping through all the elements. For an account with ~15k reports, this loop takes up to 500ms. What’s worth noticing, OptionsListUtils.getSearchOptions is called directly in SearchPage constructor, and it’s responsible for retrieving the data that gets set as an initial state values.

Solution: To prevent doing heavy calculations on the same time as transitioning, we should remove calling getSearchOptions from constructor and set default values to empty objects. Instead, we can load this data right after transition ends by using onEntryTransitionEnd prop in ScreenWrapper. With this solution, animation will be smooth and user will be presented with the skeleton unless the data is processed. In my measurements, it reduced the time for initial render of SearchPage from ~1400ms to ~76ms. While profiling, JS Heap went down from 435-840mb range to 90-450mb.

cc @TMisiukiewicz

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017fbfc71ea6da3266
• Upwork Job ID: 1716834699820085248
• Last Price Increase: 2023-10-24

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017fbfc71ea6da3266

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @robertKozik (External)

[mountiny]

Sorry @laurenreidexpensify matt is ooo now