Remove useOptionsList in SearchRouter component#82656
Remove useOptionsList in SearchRouter component#82656mountiny merged 6 commits intoExpensify:mainfrom
Conversation
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
melvin-bot
Bot
requested review from
joekaufmanexpensify and
shubham1206agra
and removed request for
a team and
joekaufmanexpensify
|
@shubham1206agra Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Reviewer Checklist
Screenshots/VideosScreen.Recording.2026-02-18.at.7.13.54.PM.mov |
|
@codex review |
| allCards: CardList | undefined; | ||
|
|
||
| /** Reference to the outer element */ | ||
| ref?: ForwardedRef<SelectionListWithSectionsHandle>; |
There was a problem hiding this comment.
❌ CLEAN-REACT-PATTERNS-1 (docs)
The new skeletonView?: React.ReactNode prop is an optional content prop whose sole purpose is conditional rendering (if (isLoading && skeletonView) { return skeletonView; }). This matches Case 2 of the composition-over-configuration rule: adding a named ReactNode slot prop that maps 1:1 to a conditional render block.
Consider instead having SearchAutocompleteList own its loading UI internally (e.g., with a default OptionsListSkeletonView), or exposing the loading state and letting the parent compose the skeleton externally:
// Option A: Component owns its default skeleton internally
if (isLoading) {
return (
<OptionsListSkeletonView
fixedNumItems={4}
shouldStyleAsTable
speed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
/>
);
}
// Option B: Parent composes loading state externally (what the code did before, but driven by the child's state)Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
this is valid, I'd flag this prop myself
There was a problem hiding this comment.
please rework the PR with this one in mind
There was a problem hiding this comment.
I plan to implement // Option B: Parent composes loading state externally. Option A is somewhat hard-coded, which may pose a problem if other Parent components need to render a different skeleton UI in the future.
To proceed with Option B, I will lift the loading options data from this line into the parent component:
This will allow the parent component to check if the data is still loading and render a skeleton view. If not, it can pass the data down to SearchAutocompleteList.
Does it look good to you? @adhorodyski @shubham1206agra @mountiny
There was a problem hiding this comment.
@hoangzinh My vote is on option A as there is no variety of loaders present right now, and I don't want components to get over-engineered. We will implement option B when it is required in future.
There was a problem hiding this comment.
Go with Option A. The implementation in SearchAutocompleteList would be something around:
// SearchAutocompleteList.tsx - no new props needed
const [recentSearches, recentSearchesMetadata] = useOnyx(ONYXKEYS.RECENT_SEARCHES, {canBeMissing: true});
// ...
const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata);
const isLoading = !isRecentSearchesDataLoaded || !areOptionsInitialized;
if (isLoading) {
return (
<OptionsListSkeletonView
fixedNumItems={4}
shouldStyleAsTable
speed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
/>
);
}We want to keep SearchRouter clean - no useOptionsList, no recentSearchesMetadata, no skeletonView prop. The component owns its own loading behavior. Option B violates CLEAN-REACT-PATTERNS-2.
There was a problem hiding this comment.
If we want other loaders later on, we can always compose other React trees 🤷🏼
There was a problem hiding this comment.
@shubham1206agra @adhorodyski Thank you for your feedback. I updated in this commit 94409ec
|
Codex Review: Didn't find any major issues. Can't wait for the next one! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
mountiny
left a comment
mountiny
left a comment
There was a problem hiding this comment.
Yeah please, I wanted to check if the reviewer will catch it
|
@hoangzinh Please can you resolve conflicts? @shubham1206agra can you complete the review then? Thanks |
I resolved conflicts |
|
@shubham1206agra Can you please complete the review on this one? |
|
@mountiny You are good to merge here. I retested the PR |
|
🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/mountiny in version: 9.3.26-0 🚀
|
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.26-8 🚀
|
5 participants
Explanation of Change
A part of replacing
useOptionsListbyuseFilteredOptions. This PR removeduseOptionsListdependency fromSearchRouterand moved skeleton rendering intoSearchAutocompleteList. This keeps loading UI behavior centralized in the list component.Fixed Issues
$ #82186
PROPOSAL:
Tests
Same as QA
Offline tests
Same as QA
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-02-17.at.21.14.05.android.mov
Android: mWeb Chrome
Screen.Recording.2026-02-17.at.21.13.15.android.c.mov
iOS: Native
Screen.Recording.2026-02-17.at.21.16.09.mov
iOS: mWeb Safari
Screen.Recording.2026-02-17.at.21.16.39.mov
MacOS: Chrome / Safari
Screen.Recording.2026-02-17.at.21.08.36.mov