Follow up for "add search input to mobile search page issue"

[SzymczakJ]

This is group issue for all the follow-ups of add search input to mobile search page issue PR.
What needs to be done?

• iOS - Search - Unable to double tap on the search field to highlight it
• design change - fadeIn/Out of the content
• design change - flicker of bookmark button
• boost Reports page performance Reports - Search input is slow to expand when opening the second time onward #57069
• Search autocomplete list not visible [CP Staging] fix blank area and status bar #57113 (comment)
• mWeb - Reports - Navigation bar is displayed above keyboard when tapping on search input. #57170

cc @luacmartins

Issue Owner

Current Issue Owner: @SzymczakJ

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

@luacmartins, @NicMendonca, @ikevin127, @SzymczakJ Whoops! This issue is 2 days overdue. Let's get this updated quick!

[SzymczakJ]

WIP, I started looking at the performance of Reports page.

[SzymczakJ]

Update: I'm testing out an option to replace SelectionList(from our Search/index.tsx component) with a FlashList. Writing a small POC to check. if it's even doable and what performance gains it might give us.

[SzymczakJ]

I've done measurements with React Native dev tools profiler:
I've measured the total count of react commits that are caused by navigating for the first time to Reports page and I also summed the total render time(plus time spent on running useEffects and useLayoutEffects)
These are the results:
Old version: total commits ~35, total time: ~4000 ms
New version using flash list: total commits: ~23-24, total time ~1500ms
Selection list implements many functionalities(and a lot of them are not performant) that Reports page doesn't need and that's the main reason using Flash list helps so much.

I don't have all of the functionalities implemented yet(like selecting items with arrows), so the total time of the new approach will be higher, but I still think this will be tremendous upgrade in the Reports page performance. WDYT of this @luacmartins. Migrating this fully will take some time(probably the draft should be ready next week), so I need your green light to continue 😄

[luacmartins]

That seems promising. Do you have a POC I can take a look at?

[SzymczakJ]

Here's a small POC ⬆

[luacmartins]

@SzymczakJ I just wanted to bring this other PR that's also aiming to improve the performance of Search

[SzymczakJ]

Thanks for mentioning that. We're lucky and our PRs optimise other things, so both of them are valuable 😄. If you see any other performance fixes for Search, please let me know!
I'm also pretty close to having full functionality of SelectionList in my new FlashList.

[luacmartins]

Nice! Let's keep it up!

[melvin-bot]

@luacmartins @NicMendonca @ikevin127 @SzymczakJ this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[SzymczakJ]

WIP: I didn't have time to look at this today, but I will work on it tomorrow.

[melvin-bot]

@SzymczakJ Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[SzymczakJ]

This is really close to being ready for review, I should be able to achieve this tomorrow.