Search Autocomplete: Always Render with Loading Skeleton & add isReady focus guard#63627
Merged
yuwenmemon merged 16 commits intoExpensify:mainfrom Jun 19, 2025
Merged
Conversation
|
@DylanDylann 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] |
16 tasks
DylanDylann
reviewed
Jun 10, 2025
| return ( | ||
| // On page refresh, when the list is rendered before options are initialized the auto-focusing on initiallyFocusedOptionKey | ||
| // will fail because the list will be empty on first render so we only render after options are initialized. | ||
| areOptionsInitialized && ( |
Contributor
There was a problem hiding this comment.
If removing this condition, I suggest displaying a loading skeleton if areOptionsInitialized is false. And we only render SelectionList if areOptionsInitialized is true. With this way, we don't need to implement another solution to fix #59552
Contributor
Author
There was a problem hiding this comment.
the problem is that useOptionList hook and context are very heavy in computation and that blocks UI. On mobile this gives a significant lag while first modal opening.
I am working on that useOptionList optimisation on another issue
Contributor
|
BUG: The highlight is not displayed when going search page right after clearing the data (This doesn't happen on the staging). Screen.Recording.2025-06-10.at.17.44.27.mov |
Contributor
…earchRouter for List render
…earchRouter for List render
DylanDylann
reviewed
Jun 17, 2025
|
|
||
| return () => removeKeyDownPressListener(setHasKeyBeenPressed); | ||
| }, [setHasKeyBeenPressed]); | ||
|
|
| onArrowFocus={onArrowFocus} | ||
| ref={ref} | ||
| initiallyFocusedOptionKey={!shouldUseNarrowLayout ? styledRecentReports.at(0)?.keyForList : undefined} | ||
| shouldScrollToFocusedIndex={!areOptionsInitialized} |
Contributor
There was a problem hiding this comment.
Is this same as the previous condition?
Co-authored-by: DylanDylann <141406735+DylanDylann@users.noreply.github.com>
Co-authored-by: DylanDylann <141406735+DylanDylann@users.noreply.github.com>
DylanDylann
reviewed
Jun 17, 2025
Comment on lines
+202
to
+209
| const feedAutoCompleteList = useMemo( | ||
| () => | ||
| Object.entries(cardFeedNamesWithType).map(([cardFeedKey, cardFeedName]) => ({ | ||
| cardFeedKey, | ||
| cardFeedName, | ||
| })), | ||
| [cardFeedNamesWithType], | ||
| ); |
Contributor
There was a problem hiding this comment.
this seems this change came from your local prettier. Let's avoid these change as much as possible
| onArrowFocus={onArrowFocus} | ||
| ref={ref} | ||
| initiallyFocusedOptionKey={!shouldUseNarrowLayout ? styledRecentReports.at(0)?.keyForList : undefined} | ||
| shouldScrollToFocusedIndex={isInitialRender} |
Contributor
There was a problem hiding this comment.
Suggested change
| shouldScrollToFocusedIndex={isInitialRender} | |
| shouldScrollToFocusedIndex={!isInitialRender} |
Contributor
|
@sosek108 From my testing, I still see the white space displayed after the skeleton is displayed. It will be better if we can display the skeleton until the search list is render Screen.Recording.2025-06-17.at.16.59.19.mov |
Contributor
|
We may need to move the skeleton component to SearchAutocompleteList and add some conditions |
Contributor
Author
hit.mov@DylanDylann How about that? return (
<>
{isInitialRender && (
<OptionsListSkeletonView
fixedNumItems={4}
shouldStyleAsTable
speed={3}
/>
)}
<SelectionList<OptionData | SearchQueryItem>
showLoadingPlaceholder={!areOptionsInitialized}
fixedNumItemsForLoader={4}
loaderSpeed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
sections={sections}
onSelectRow={onListItemPress}
ListItem={SearchRouterItem}
containerStyle={[styles.mh100]}
sectionListStyle={[styles.ph2, styles.pb2, styles.overscrollBehaviorContain]}
listItemWrapperStyle={[styles.pr0, styles.pl0]}
getItemHeight={getItemHeight}
onLayout={() => {
setPerformanceTimersEnd();
setIsInitialRender(false);
if (!!textInputRef?.current && ref && 'current' in ref) {
ref.current?.updateExternalTextInputFocus?.(textInputRef.current.isFocused());
}
}}
showScrollIndicator={!shouldUseNarrowLayout}
sectionTitleStyles={styles.mhn2}
shouldSingleExecuteRowSelect
onArrowFocus={onArrowFocus}
ref={ref}
initiallyFocusedOptionKey={!shouldUseNarrowLayout ? styledRecentReports.at(0)?.keyForList : undefined}
shouldScrollToFocusedIndex={!isInitialRender}
shouldSubscribeToArrowKeyEvents={shouldSubscribeToArrowKeyEvents}
disableKeyboardShortcuts={!shouldSubscribeToArrowKeyEvents}
/>
</>
);
``` |
Contributor
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2025-06-19.at.15.11.53.movAndroid: mWeb ChromeScreen.Recording.2025-06-19.at.15.15.00.moviOS: HybridAppScreen.Recording.2025-06-19.at.16.06.21.moviOS: mWeb SafariScreen.Recording.2025-06-19.at.15.13.13.movMacOS: Chrome / SafariScreen.Recording.2025-06-19.at.15.48.47.movMacOS: DesktopScreen.Recording.2025-06-19.at.15.52.11.mov |
yuwenmemon
changed the title
yuwenmemon
approved these changes
Jun 19, 2025
Contributor
yuwenmemon
left a comment
yuwenmemon
left a comment
There was a problem hiding this comment.
Please use more descriptive PR titles next time
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
53 tasks
Contributor
|
🚀 Deployed to staging by https://github.com/yuwenmemon in version: 9.1.70-0 🚀
|
Closed
8 tasks
Contributor
|
FYI: This was reverted to fix a deploy blocker. |
Contributor
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 9.1.70-7 🚀
|
3 similar comments
Contributor
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 9.1.70-7 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 9.1.70-7 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 9.1.70-7 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 9.1.70-7 🚀
|
48 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
This change improves the user experience of the search autocomplete by allowing the component to render even when data is still loading. We remove strict conditional renderings that previously blocked display of the autocomplete list and instead always show the loading skeleton if recent reports or searches are not yet available. The isReady property is introduced to ensure the correct option is focused only once all required data is loaded, preserving focus behavior and preventing regression. As an optional improvement, we update loading skeleton logic so users always see recent searches, with the loading indicator rendered beneath when recent reports are still loading.
Fixed Issues
$ #62335
PROPOSAL: #62335 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop