[$250] Search - Green Circular Loading Indicator keeps loading after results appear

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.71-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #39865

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on FAB > Start a chat
3. Search for a contact inside the search input field

Expected Result:

The Green Circular Loading indicator stops loading after search results appear

Actual Result:

The Green Circular Loading indicator keeps on loading even after search results appear and are done

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6473957_1715099159868.bandicam_2024-05-07_19-22-13-086.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f38e992db5566a4a
• Upwork Job ID: 1787956238083543040
• Last Price Increase: 2024-05-07

Issue Owner

Current Issue Owner: @Ollyws

[melvin-bot]

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

[lanitochka17]

@lschurr 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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[melvin-bot]

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

[melvin-bot]

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

[brunovjk]

I couldn't reproduce it. However, there is an annoying delay when the search is completed (OptionsList) and the green indicator disappears (searchInServer).
I didn't have this issue when I was testing the PR. I believe this has to do with the server's response, since we depend on it to disappear with the indicator:

App/src/libs/actions/Report.ts

Lines 3540 to 3570 in 9fe4b15

	function searchForReports(searchInput: string, policyID?: string) {
	// We do not try to make this request while offline because it sets a loading indicator optimistically
	if (isNetworkOffline) {
	Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
	return;
	}
	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
	value: false,
	},
	];
	const failureData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
	value: false,
	},
	];
	const searchForRoomToMentionParams: SearchForRoomsToMentionParams = {query: searchInput, policyID: policyID ?? ''};
	const searchForReportsParams: SearchForReportsParams = {searchInput};
	API.read(policyID ? READ_COMMANDS.SEARCH_FOR_ROOMS_TO_MENTION : READ_COMMANDS.SEARCH_FOR_REPORTS, policyID ? searchForRoomToMentionParams : searchForReportsParams, {
	successData,
	failureData,
	});
	}

Anyway I made a proposal.

[brunovjk]

Proposal

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

There is an annoying delay when the search is completed (getFilteredOptions) and the green indicator disappears (searchInServer) when we search for members.

What is the root cause of that problem?

The search and green circular behavior are not aligned. One depends on getFilteredOptions and another on searchInServer.
So, what I think is happening is that the response from option list comes first and only then do we have the response from searchInServer, creating this unnecessary delay.

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

Align the behavior of the isLoadingNewOptions indicator directly with the member (option) list process, eliminating the dependency on the server response (ONYXKEYS.IS_SEARCHING_FOR_REPORTS) for controlling the indicator.

1. Introduce a local state variable, such as isFetchingOptions, to track the status of the search process.
2. Set isFetchingOptions to true when the fetch search + member (option) list process starts and to false when it completes.

Note: We need to do this on all pages that use this search for member flow.

What alternative solutions did you explore? (Optional)

N/A