Refactor search functionality to improve loading state handling #83917
+210
−76
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from 'react'; | ||
| import type {StyleProp, ViewStyle} from 'react-native'; | ||
| import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'; | ||
| import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import {endSpanWithAttributes} from '@libs/telemetry/activeSpans'; | ||
| import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; | ||
| import CONST from '@src/CONST'; | ||
|
|
||
| type SearchLoadingSkeletonProps = { | ||
| containerStyle?: StyleProp<ViewStyle>; | ||
| reasonAttributes?: SkeletonSpanReasonAttributes; | ||
| }; | ||
|
|
||
| function SearchLoadingSkeleton({containerStyle, reasonAttributes}: SearchLoadingSkeletonProps) { | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return ( | ||
| <Animated.View | ||
| entering={FadeIn.duration(CONST.SEARCH.ANIMATION.FADE_DURATION)} | ||
| exiting={FadeOut.duration(CONST.SEARCH.ANIMATION.FADE_DURATION)} | ||
| style={[styles.flex1]} | ||
| onLayout={() => { | ||
| endSpanWithAttributes(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS, {[CONST.TELEMETRY.ATTRIBUTE_IS_WARM]: false}); | ||
| }} | ||
| > | ||
| <SearchRowSkeleton | ||
| shouldAnimate | ||
| containerStyle={containerStyle} | ||
| reasonAttributes={reasonAttributes} | ||
| /> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchLoadingSkeleton; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import {useSearchStateContext} from '@components/Search/SearchContext'; | ||
| import type {SearchQueryJSON} from '@components/Search/types'; | ||
| import type {SearchResults} from '@src/types/onyx'; | ||
| import useNetwork from './useNetwork'; | ||
|
|
||
| /** | ||
| * Computes whether the search page should show a loading skeleton. | ||
| * Accepts searchResults from the caller (which may include a sorting fallback) | ||
| * rather than reading raw context data, so that sorting doesn't trigger a skeleton flash. | ||
| * | ||
| * Note: This hook intentionally does NOT check isCardFeedsLoading. Card feed loading is handled | ||
| * internally by the Search component's shouldShowLoadingState — blocking Search from mounting | ||
| * would prevent the API call from firing and create a deadlock. | ||
| */ | ||
| function useSearchLoadingState(queryJSON: SearchQueryJSON | undefined, searchResults: SearchResults | undefined): boolean { | ||
| const {isOffline} = useNetwork(); | ||
| const {shouldUseLiveData} = useSearchStateContext(); | ||
|
|
||
| if (shouldUseLiveData || isOffline || !queryJSON) { | ||
| return false; | ||
| } | ||
|
|
||
| const hasNoData = searchResults?.data === undefined; | ||
|
|
||
| // Show page-level skeleton ONLY when no data has ever arrived for this query. | ||
| // Once data arrives (even empty []), Search mounts and handles its own | ||
| // loading/empty states internally via shouldShowLoadingState. | ||
| return hasNoData; | ||
| } | ||
|
|
||
| export default useSearchLoadingState; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import {useFocusEffect} from '@react-navigation/native'; | ||
| import {useCallback, useEffect} from 'react'; | ||
| import {useSearchActionsContext, useSearchStateContext} from '@components/Search/SearchContext'; | ||
| import type {SearchQueryJSON} from '@components/Search/types'; | ||
| import {openSearch, search} from '@libs/actions/Search'; | ||
| import {isSearchDataLoaded} from '@libs/SearchUIUtils'; | ||
| import useNetwork from './useNetwork'; | ||
| import usePrevious from './usePrevious'; | ||
| import useSearchShouldCalculateTotals from './useSearchShouldCalculateTotals'; | ||
|
|
||
| /** | ||
| * Handles page-level setup for Search that must happen before the Search component mounts: | ||
| * - Clears selected transactions when the query changes | ||
| * - Fires the search() API call so data starts loading alongside the skeleton | ||
| * - Fires openSearch() to load bank account data | ||
| * - Re-fires openSearch() when coming back online | ||
| */ | ||
| function useSearchPageSetup(queryJSON: SearchQueryJSON | undefined) { | ||
| const {isOffline} = useNetwork(); | ||
| const prevIsOffline = usePrevious(isOffline); | ||
| const {clearSelectedTransactions} = useSearchActionsContext(); | ||
| const {shouldUseLiveData, currentSearchResults, currentSearchKey} = useSearchStateContext(); | ||
|
|
||
| const hash = queryJSON?.hash; | ||
| const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, hash, true); | ||
|
|
||
| // Clear selected transactions when navigating to a different search query | ||
| const clearOnHashChange = useCallback(() => { | ||
| if (hash === undefined) { | ||
| return; | ||
| } | ||
| clearSelectedTransactions(hash); | ||
| }, [hash, clearSelectedTransactions]); | ||
|
|
||
| useFocusEffect(clearOnHashChange); | ||
|
|
||
| // useEffect supplements useFocusEffect: it handles both the initial mount | ||
| // and cases where route params change without a navigation event (e.g. sorting). | ||
| useEffect(clearOnHashChange, [clearOnHashChange]); | ||
|
|
||
| // Fire search() when the query changes (hash). This runs at the page level so the | ||
| // API request starts in parallel with the skeleton, before Search mounts its 14+ useOnyx hooks. | ||
| // currentSearchResults is intentionally read but not in deps — search should fire once per | ||
| // query change, not re-trigger on every data update from Onyx. | ||
| useEffect(() => { | ||
| if (!queryJSON || hash === undefined || shouldUseLiveData || isOffline) { | ||
|
Contributor
There was a problem hiding this comment. ❌ PERF-12 (docs)
Wrap const syncContextWithRoute = useCallback(() => {
if (hash === undefined || recentSearchHash === undefined || !queryJSON) {
return;
}
clearSelectedTransactions(hash);
setCurrentSearchHashAndKey(hash, recentSearchHash, searchKey);
setCurrentSearchQueryJSON(queryJSON);
}, [hash, recentSearchHash, searchKey, clearSelectedTransactions, setCurrentSearchHashAndKey, setCurrentSearchQueryJSON, queryJSON]);Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency. |
||
| return; | ||
| } | ||
|
Contributor
There was a problem hiding this comment. ❌ PERF-9 (docs)
This is directly related to the missing Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency. |
||
| if (isSearchDataLoaded(currentSearchResults, queryJSON) || currentSearchResults?.search?.isLoading) { | ||
| return; | ||
| } | ||
| search({queryJSON, searchKey: currentSearchKey, offset: 0, shouldCalculateTotals, isLoading: false}); | ||
| }, [hash, isOffline, shouldUseLiveData, queryJSON]); | ||
|
Check warning on line 53 in src/hooks/useSearchPageSetup.ts
|
||
|
|
||
| useEffect(() => { | ||
| openSearch({includePartiallySetupBankAccounts: true}); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (!prevIsOffline || isOffline) { | ||
| return; | ||
| } | ||
| openSearch({includePartiallySetupBankAccounts: true}); | ||
| }, [isOffline, prevIsOffline]); | ||
| } | ||
|
|
||
| export default useSearchPageSetup; | ||
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
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
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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should also remove the skeleton logic from SearchList since we now do this up the tree
App/src/components/Search/index.tsx
Lines 1210 to 1224 in eed56d0