[$250] Search - Search tabs are blank instead of showing empty state in offline mode

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.21-3
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in.
3. Do not open Search page.
4. Go offline.
5. Go to Search.

Expected Result:

Search tabs will show empty state instead of blank in offline mode (previous behavior).

Actual Result:

Search tabs are blank in offline mode.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6574888_1723925312307.20240818_040635.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0105023dd56503c746
• Upwork Job ID: 1825991013663261123
• Last Price Increase: 2024-08-27
• Automatic offers:
• akinwale | Reviewer | 103709463
• dominictb | Contributor | 103709465

Issue Owner

Current Issue Owner: @garrettmknight

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[IuliiaHerets]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

Search - Search tabs are blank instead of showing empty state in offline mode

What is the root cause of that problem?

• The loading state is not shown because of the condition below.
  

  App/src/components/Search/index.tsx

  Line 180 in 67ad466

  const shouldShowLoadingState = !isOffline && !isDataLoaded;

• We return null when type is undefined.
  

  App/src/components/Search/index.tsx

  Lines 208 to 211 in 67ad466

  	if (searchResults === undefined || type === undefined) {
  	Log.alert('[Search] Undefined search type');
  	return null;
  	}

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

We should remove !isOffline check.

What alternative solutions did you explore? (Optional)

1. Instead of getting type from SearchUtils.getSearchType(searchResults?.search);, we should get the type from queryJSON.
   

   App/src/components/Search/index.tsx

   Lines 206 to 231 in 67ad466

   	const type = SearchUtils.getSearchType(searchResults?.search);
   	if (searchResults === undefined || type === undefined) {
   	Log.alert('[Search] Undefined search type');
   	return null;
   	}
   	const ListItem = SearchUtils.getListItem(type, status);
   	const data = SearchUtils.getSections(type, status, searchResults.data, searchResults.search);
   	const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder);
   	const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));
   	const shouldShowEmptyState = !isDataLoaded || data.length === 0;
   	if (shouldShowEmptyState) {
   	return (
   	<>
   	<SearchPageHeader
   	isCustomQuery={isCustomQuery}
   	queryJSON={queryJSON}
   	hash={hash}
   	/>
   	<EmptySearchView type={type} />
   	</>
   	);
   	}

   
   

   App/src/components/Search/index.tsx

   Line 91 in 67ad466

   const {status, sortBy, sortOrder, hash} = queryJSON;

• Or we can modify the type constant to const type = SearchUtils.isSearchDataType(searchResults?.search?.type ?? queryType);

2. We also need to update the searchResults === undefined || type === undefined condition to searchResults === undefined && type === undefined
   3.Additionally we also need to modify the constants below to ensure we don't get any error when searchResults is undefined:
   

   App/src/components/Search/index.tsx

   Lines 213 to 217 in 67ad466

   	const ListItem = SearchUtils.getListItem(type, status);
   	const data = SearchUtils.getSections(type, status, searchResults.data, searchResults.search);
   	const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder);
   	const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));

TO:

    const ListItem = SearchUtils.getListItem(type, status);
    const data = SearchUtils.getSections(type, status, searchResults?.data ?? [], searchResults?.search ?? []);
    const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder);
    const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));

Updated Code

    const type = (searchResults?.search?.type ?? queryType) as SearchDataTypes;
    const isValidType = SearchUtils.isSearchDataType(type);

    if (searchResults === undefined && !isValidType) {
        Log.alert('[Search] Undefined search type');
        return null;
    }

    const ListItem = SearchUtils.getListItem(type, status);
    const data = SearchUtils.getSections(type, status, searchResults?.data ?? {}, searchResults?.search ?? []);
    const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder);
    const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));

    const shouldShowEmptyState = !isDataLoaded || data.length === 0;

    if (shouldShowEmptyState) {
        return (
            <>
                <SearchPageHeader
                    isCustomQuery={isCustomQuery}
                    queryJSON={queryJSON}
                    hash={hash}
                />
                <EmptySearchView type={type} />
            </>
        );
    }

OPTIONAL: We can also use const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); to show loading state when shouldShowLoadingState || isLoadingApp is true.

[wildan-m]

Proposal

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

Search tabs display blank instead of showing an empty state in offline mode.

What is the root cause of that problem?

We return empty component when the searchResults and type undefined

App/src/components/Search/index.tsx

Lines 208 to 211 in 62722e8

	if (searchResults === undefined || type === undefined) {
	Log.alert('[Search] Undefined search type');
	return null;
	}

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

If searchResults and type are undefined, it means the loading process hasn't started. In this case, it's better to display a loading skeleton instead of an empty state. However, if loading has started once and we reload it offline, then we can show an empty state.

Instead of returning empty component, I think this logic searchResults === undefined || type === undefined should be present at shouldShowLoadingState

Move up the logic and show loading state instead of empty component.
src/components/Search/index.tsx

    const type = SearchUtils.getSearchType(searchResults?.search);
    const isDataLoaded = searchResults?.data !== undefined;
    const shouldShowLoadingState = (!isOffline && !isDataLoaded) || (searchResults === undefined || type === undefined);

Branch for this solution.

What alternative solutions did you explore? (Optional)

N/A

[dominictb]

Proposal

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

Search tabs are blank in offline mode.

What is the root cause of that problem?

When we didn't call Search API yet, and go offline, then open Search page, function SearchActions.search is not called:

App/src/components/Search/index.tsx

Lines 115 to 122 in 62722e8

	useEffect(() => {
	if (isOffline) {
	return;
	}
	SearchActions.search({queryJSON, offset, policyIDs});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isOffline, offset, queryJSON]);

In there, searchResults data is undefined:

App/src/components/Search/index.tsx

Line 177 in 62722e8

const searchResults = currentSearchResults?.data ? currentSearchResults : lastSearchResultsRef.current;

so we display empty view:

App/src/components/Search/index.tsx

Lines 208 to 211 in 62722e8

	if (searchResults === undefined || type === undefined) {
	Log.alert('[Search] Undefined search type');
	return null;
	}

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

When we haven't called Search API yet, in other words, there is no snapshot_ data in onyx, we should not show the empty state because the empty state should be displayed when we already call Search API but the result is empty.

When we are in offline, we should not display the loading state because the loading state is used to indicates that we're trying to load something, but infact we're not actually loading anything as user is offline.

Based on the above, we should display the offline page, indicating that user is offline and we're unable to load. It is our pattern D in the Offline UX. So just need to update:

App/src/components/Search/index.tsx

Line 210 in 62722e8

return null;

to:

        return <FullPageOfflineBlockingView>{null}</FullPageOfflineBlockingView>;

Demo

What alternative solutions did you explore? (Optional)

We can update:

App/src/components/Search/index.tsx

Lines 208 to 211 in 62722e8

	if (searchResults === undefined || type === undefined) {
	Log.alert('[Search] Undefined search type');
	return null;
	}

    if (searchResults === undefined) {
        return (
            <>
                <SearchPageHeader
                    isCustomQuery={isCustomQuery}
                    queryJSON={queryJSON}
                    hash={hash}
                />
                <EmptySearchView />
            </>
        );
    }

    if (type === undefined) {
        Log.alert('[Search] Undefined search type');
        return null;
    }

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@garrettmknight, @akinwale Huh... This is 4 days overdue. Who can take care of this?

[garrettmknight]

@akinwale can you take a look at these proposals?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[akinwale]

@dominictb's proposal is the best approach here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @puneetlath, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@akinwale, I believe it will cause inconsistency because pages like categories, tags show empty state instead of offline state.

Sorry, I see that in those pages we have option to add the tags.

[dominictb]

@garrettmknight This hit production on Sep 11 on should be ready for payment today. #48791 (comment)

[melvin-bot]

This issue has not been updated in over 15 days. @puneetlath, @garrettmknight, @akinwale, @dominictb eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[garrettmknight]

Payment Summary:

• Contributor: @dominictb $250 paid via upwork
• Reviewer: @akinwale $250 paid via upwork