[Due for payment 2026-04-20] [$250] Always show the 'Explore' section on the reports page

[JS00001]

Coming from this thread:
https://expensify.slack.com/archives/C07NMDKEFMH/p1774289916036549

We currently show a full loading skeleton when we open the search page for the first time. However, the Explore options always exist. Lets make those visible, with the rest of the suggested searches loading underneath.

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022036150963948134077
• Upwork Job ID: 2036150963948134077
• Last Price Increase: 2026-03-23
• Automatic offers:
• aimane-chnaif | Reviewer | 110963237

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When opening the Search page for the first time, a full loading skeleton covers the entire sidebar menu (on wide layout), hiding the Explore section (Reports, Expenses, Chats). These Explore items are static and always available — they should be visible immediately while other dynamic sections (Todo, Saved) load.

What is the root cause of that problem?

In src/pages/Search/SearchTypeMenu.tsx:94-106, a single loading gate areSuggestedSearchesLoading controls whether a SuggestedSearchSkeleton is shown or the actual menu sections are rendered:

const areSuggestedSearchesLoading = !isOffline && !isSearchDataLoaded && !isLoadingOnyxValue(isSearchDataLoadedResult);

{areSuggestedSearchesLoading ? (
    <SuggestedSearchSkeleton />
) : (
    // ALL sections: Explore, Todo, Saved
)}

This flag depends on IS_SEARCH_PAGE_DATA_LOADED (ONYXKEYS.IS_SEARCH_PAGE_DATA_LOADED), which starts as undefined and only becomes true after the openSearchPage API call succeeds. Since there is no optimistic data, the skeleton blocks all sections until the server responds.

However, the Explore section items have their visibility hardcoded to true in src/libs/SearchUIUtils.ts:1077-1079 and their data is built entirely from client-side constants (via buildCannedSearchQuery()). They do not depend on any data from the openSearchPage API call.

What changes do you think we should make in order to solve the problem?

In src/pages/Search/SearchTypeMenu.tsx, split the rendering so the Explore section is rendered immediately (outside the loading gate), while the remaining dynamic sections (Todo, Saved) remain behind the areSuggestedSearchesLoading gate.

Concretely:

1. Separate the typeMenuSections into two groups: the Explore section (first section, always static) and the remaining dynamic sections.
2. Always render the Explore section regardless of the loading state.
3. Show the SuggestedSearchSkeleton (or a modified version of it) only for the dynamic sections while areSuggestedSearchesLoading is true.

This way, users see the Explore options (Reports, Expenses, Chats) instantly on page load, with the rest of the suggested searches loading underneath — exactly as described in the issue.

What alternative solutions did you explore? (Optional)

An alternative would be to set IS_SEARCH_PAGE_DATA_LOADED optimistically to true (moving it to optimisticData instead of successData in openSearchPage). However, this would show incomplete Todo/Saved sections that depend on server data, which could cause a flash of incorrect content. Splitting the rendering is more precise — it shows what's ready and loads the rest.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[NirDiamant]

• The sectionStartIndices / activeItemIndex focus tracking needs to stay consistent. Because we're splitting rendering but not the data source, the flattened indices won't break - but this needs to be called out to avoid accidental refactoring that would split the data too.
• The SuggestedSearchSkeleton currently hardcodes 3 skeleton groups. If we show Explore immediately, we'd have the real Explore section + 3 skeleton groups, which is too many shimmer blocks. The skeleton's group count (line 103) should be reduced to 2 (or made configurable) so the loading state accurately represents the remaining dynamic sections.

What alternative solutions did you explore? (Optional)

Setting IS_SEARCH_PAGE_DATA_LOADED optimistically to true in openSearchPage would remove the skeleton entirely, but would flash incomplete Todo/Saved/Reconciliation sections whose visibility depends on policy data that may not be fetched yet. Splitting the render is more precise - it shows what's ready (Explore) and skeletons only what actually needs server data.

[NirDiamant]

Contributor details
Your Expensify account email: nirdiamant21@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~016cfe264764ea59ba

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the Search page is opened for the first time, the left navigation area is replaced by a full skeleton. This hides the Explore options (Reports, Expenses, Chats), even though those entries are always available and should be immediately visible.

Expected: Explore options are visible right away, and only the remaining suggested-search sections load underneath.
Actual: A full menu skeleton is shown first, so Explore is hidden until loading completes.

What is the root cause of that problem?

SearchTypeMenu uses a single loading branch (areSuggestedSearchesLoading) that replaces the entire menu content with SuggestedSearchSkeleton, so no real sections render during initial load.

App/src/pages/Search/SearchTypeMenu.tsx

Lines 94 to 143 in 21b0eb8

	const areSuggestedSearchesLoading = !isOffline && !isSearchDataLoaded && !isLoadingOnyxValue(isSearchDataLoadedResult);
	return (
	<ScrollView
	onScroll={onScroll}
	ref={scrollViewRef}
	showsVerticalScrollIndicator={false}
	>
	{areSuggestedSearchesLoading ? (
	<View style={[styles.pb4, styles.mh3, styles.gap4]}>
	<SuggestedSearchSkeleton />
	</View>
	) : (
	<View style={[styles.pb4, styles.mh3, styles.gap4]}>
	{typeMenuSections.map((section, sectionIndex) => (
	<View key={section.translationPath}>
	<Text
	style={styles.sectionTitle}
	accessibilityRole={CONST.ROLE.HEADER}
	>
	{translate(section.translationPath)}
	</Text>
	{section.translationPath === 'search.savedSearchesMenuItemTitle' ? (
	<SavedSearchList hash={hash} />
	) : (
	<>
	{section.menuItems.map((item, itemIndex) => {
	const flattenedIndex = (sectionStartIndices?.at(sectionIndex) ?? 0) + itemIndex;
	const focused = activeItemIndex === flattenedIndex;
	const icon = typeof item.icon === 'string' ? expensifyIcons[item.icon] : item.icon;
	return (
	<SearchTypeMenuItem
	key={item.key}
	title={translate(item.translationPath)}
	icon={icon}
	badgeText={getItemBadgeText(item.key, reportCounts)}
	focused={focused}
	onPress={() => handleTypeMenuItemPress(item.searchQuery)}
	/>
	);
	})}
	</>
	)}
	</View>
	))}
	</View>
	)}
	</ScrollView>

At the same time, the section builder already constructs Explore independently (first section in createTypeMenuSections), but this ready data is not used while loading because of the full skeleton gate.

App/src/libs/SearchUIUtils.ts

Lines 3690 to 3729 in 21b0eb8

	function createTypeMenuSections(params: TypeMenuSectionsParams): SearchTypeMenuSection[] {
	const {
	icons,
	currentUserEmail,
	currentUserAccountID,
	cardFeedsByPolicy,
	defaultCardFeed,
	policies,
	savedSearches,
	isOffline,
	defaultExpensifyCard,
	shouldRedirectToExpensifyClassic,
	draftTransactionIDs,
	} = params;
	const typeMenuSections: SearchTypeMenuSection[] = [];
	const suggestedSearches = getSuggestedSearches(currentUserAccountID, defaultCardFeed?.id, icons);
	const {visibility: suggestedSearchesVisibility, hasGroupPoliciesWithExpenseChat} = getSuggestedSearchesVisibility(currentUserEmail, cardFeedsByPolicy, policies, defaultExpensifyCard);
	// Explore section
	{
	const exploreSection: SearchTypeMenuSection = {
	translationPath: 'common.explore',
	menuItems: [],
	};
	if (suggestedSearchesVisibility[CONST.SEARCH.SEARCH_KEYS.REPORTS]) {
	exploreSection.menuItems.push(suggestedSearches[CONST.SEARCH.SEARCH_KEYS.REPORTS]);
	}
	if (suggestedSearchesVisibility[CONST.SEARCH.SEARCH_KEYS.EXPENSES]) {
	exploreSection.menuItems.push(suggestedSearches[CONST.SEARCH.SEARCH_KEYS.EXPENSES]);
	}
	if (suggestedSearchesVisibility[CONST.SEARCH.SEARCH_KEYS.CHATS]) {
	exploreSection.menuItems.push(suggestedSearches[CONST.SEARCH.SEARCH_KEYS.CHATS]);
	}
	if (exploreSection.menuItems.length > 0) {
	typeMenuSections.push(exploreSection);
	}
	}

What changes do you think we should make in order to solve the problem?

Render Explore as soon as it is available, and only show loading placeholders for the remaining sections while suggested searches are still loading.

App/src/pages/Search/SearchTypeMenu.tsx

Lines 34 to 143 in 21b0eb8

	function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
	const {hash, similarSearchHash} = queryJSON ?? {};
	const styles = useThemeStyles();
	const {isOffline} = useNetwork();
	const {translate} = useLocalize();
	const {singleExecution} = useSingleExecution();
	const {typeMenuSections, activeItemIndex} = useSearchTypeMenuSections({hash, similarSearchHash});
	const expensifyIcons = useMemoizedLazyExpensifyIcons([
	'Basket',
	'CalendarSolid',
	'Receipt',
	'ChatBubbles',
	'MoneyBag',
	'CreditCard',
	'MoneyHourglass',
	'CreditCardHourglass',
	'ExpensifyCard',
	'Bank',
	'User',
	'Folder',
	] as const);
	const {clearSelectedTransactions} = useSearchActionsContext();
	const [isSearchDataLoaded, isSearchDataLoadedResult] = useOnyx(ONYXKEYS.IS_SEARCH_PAGE_DATA_LOADED);
	const [reportCounts = CONST.EMPTY_TODOS_REPORT_COUNTS] = useOnyx(ONYXKEYS.DERIVED.TODOS, {selector: todosReportCountsSelector});
	const route = useRoute();
	const scrollViewRef = useRef<RNScrollView>(null);
	const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext);
	const onScroll = useCallback<NonNullable<ScrollViewProps['onScroll']>>(
	(e) => {
	// If the layout measurement is 0, it means the flash list is not displayed but the onScroll may be triggered with offset value 0.
	// We should ignore this case.
	if (e.nativeEvent.layoutMeasurement.height === 0) {
	return;
	}
	saveScrollOffset(route, e.nativeEvent.contentOffset.y);
	},
	[route, saveScrollOffset],
	);
	useLayoutEffect(() => {
	const scrollOffset = getScrollOffset(route);
	if (!scrollOffset || !scrollViewRef.current) {
	return;
	}
	scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
	}, [getScrollOffset, route]);
	const sectionStartIndices = [0];
	for (const section of typeMenuSections) {
	sectionStartIndices.push((sectionStartIndices.at(-1) ?? 0) + section.menuItems.length);
	}
	const handleTypeMenuItemPress = singleExecution((searchQuery: string) => {
	clearSelectedTransactions();
	setSearchContext(false);
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: searchQuery}));
	});
	const areSuggestedSearchesLoading = !isOffline && !isSearchDataLoaded && !isLoadingOnyxValue(isSearchDataLoadedResult);
	return (
	<ScrollView
	onScroll={onScroll}
	ref={scrollViewRef}
	showsVerticalScrollIndicator={false}
	>
	{areSuggestedSearchesLoading ? (
	<View style={[styles.pb4, styles.mh3, styles.gap4]}>
	<SuggestedSearchSkeleton />
	</View>
	) : (
	<View style={[styles.pb4, styles.mh3, styles.gap4]}>
	{typeMenuSections.map((section, sectionIndex) => (
	<View key={section.translationPath}>
	<Text
	style={styles.sectionTitle}
	accessibilityRole={CONST.ROLE.HEADER}
	>
	{translate(section.translationPath)}
	</Text>
	{section.translationPath === 'search.savedSearchesMenuItemTitle' ? (
	<SavedSearchList hash={hash} />
	) : (
	<>
	{section.menuItems.map((item, itemIndex) => {
	const flattenedIndex = (sectionStartIndices?.at(sectionIndex) ?? 0) + itemIndex;
	const focused = activeItemIndex === flattenedIndex;
	const icon = typeof item.icon === 'string' ? expensifyIcons[item.icon] : item.icon;
	return (
	<SearchTypeMenuItem
	key={item.key}
	title={translate(item.translationPath)}
	icon={icon}
	badgeText={getItemBadgeText(item.key, reportCounts)}
	focused={focused}
	onPress={() => handleTypeMenuItemPress(item.searchQuery)}
	/>
	);
	})}
	</>
	)}
	</View>
	))}
	</View>
	)}
	</ScrollView>

const exploreSection = typeMenuSections.find((section) => section.translationPath === 'common.explore');
const nonExploreSections = typeMenuSections.filter((section) => section.translationPath !== 'common.explore');

const renderSection = (section: (typeof typeMenuSections)[number], sectionIndex: number) => (
    <View key={section.translationPath}>
        <Text
            style={styles.sectionTitle}
            accessibilityRole={CONST.ROLE.HEADER}
        >
            {translate(section.translationPath)}
        </Text>

        {section.translationPath === 'search.savedSearchesMenuItemTitle' ? (
            <SavedSearchList hash={hash} />
        ) : (
            section.menuItems.map((item, itemIndex) => {
                const flattenedIndex = (sectionStartIndices.at(sectionIndex) ?? 0) + itemIndex;
                const focused = activeItemIndex === flattenedIndex;
                const icon = typeof item.icon === 'string' ? expensifyIcons[item.icon] : item.icon;

                return (
                    <SearchTypeMenuItem
                        key={item.key}
                        title={translate(item.translationPath)}
                        icon={icon}
                        badgeText={getItemBadgeText(item.key, reportCounts)}
                        focused={focused}
                        onPress={() => handleTypeMenuItemPress(item.searchQuery)}
                    />
                );
            })
        )}
    </View>
);

return (
    <ScrollView
        onScroll={onScroll}
        ref={scrollViewRef}
        showsVerticalScrollIndicator={false}
    >
        <View style={[styles.pb4, styles.mh3, styles.gap4]}>
            {!!exploreSection && renderSection(exploreSection, 0)}

            {areSuggestedSearchesLoading ? (
                <SuggestedSearchSkeleton />
            ) : (
                nonExploreSections.map((section, index) => renderSection(section, index + (exploreSection ? 1 : 0)))
            )}
        </View>
    </ScrollView>
);

App/src/pages/Search/SuggestedSearchSkeleton.tsx

Lines 48 to 123 in 21b0eb8

	function SuggestedSearchSkeleton() {
	const theme = useTheme();
	const styles = useThemeStyles();
	const {shouldUseNarrowLayout} = useResponsiveLayout();
	const renderNavigationItem = () => {
	const {icon, label} = LHN;
	return (
	<>
	<SkeletonRect
	borderRadius={icon.r}
	width={icon.w}
	height={icon.h}
	transform={[{translateX: icon.xVal}, {translateY: icon.yVal}]}
	/>
	<SkeletonRect
	width={label.w}
	height={label.h}
	transform={[{translateX: label.xVal}, {translateY: label.yVal}]}
	/>
	</>
	);
	};
	const shouldRenderNavigationColumn = !shouldUseNarrowLayout;
	const navigationColumnGroup = (
	<>
	<SkeletonViewContentLoader
	animate
	height={SECTION_HEADER_HEIGHT}
	backgroundColor={theme.skeletonLHNIn}
	foregroundColor={theme.skeletonLHNOut}
	style={[styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
	>
	<SkeletonRect
	width={LHN.header.w}
	height={LHN.header.h}
	transform={[{translateX: LHN.header.xVal}, {translateY: LHN.header.yVal}]}
	/>
	</SkeletonViewContentLoader>
	<ItemListSkeletonView
	fixedNumItems={3}
	itemViewHeight={NAV_ITEM_HEIGHT}
	style={[styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
	renderSkeletonItem={renderNavigationItem}
	/>
	</>
	);
	const navigationColumn = shouldRenderNavigationColumn ? (
	<View>
	<View>
	{[0, 1, 2].map((i) => (
	<View
	key={i}
	style={[styles.mb4]}
	>
	{navigationColumnGroup}
	</View>
	))}
	</View>
	</View>
	) : null;
	return (
	<View
	testID={SUGGESTED_SEARCH_SKELETON_TEST_ID}
	style={[styles.flex1, styles.flexRow, styles.gap4]}
	>
	{navigationColumn}
	</View>
	);
	}

// Keep SuggestedSearchSkeleton as the placeholder block for non-Explore sections.
// It should render below the real Explore section while areSuggestedSearchesLoading is true.