[$500] Search - No loading animation when pasting text for first time

[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.25-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open the app and login with any user
2. Copy any text to clipboard
3. Open search
4. Paste the text in search and observe that no loading animation is displayed

Expected Result:

App should display loading animation on pasting text in search

Actual Result:

App does not display loading animation on pasting text in search when search box is empty

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

Bug6343155_1705336591944.34493_-_search_loading_mWeb.mp4

Bug6343155_1705336591949.34493_-_search_loading_iOS.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019fb5965c49371271
• Upwork Job ID: 1746942114537074688
• Last Price Increase: 2024-01-15
• Automatic offers:
• namhihi237 | Contributor | 28109839

Issue Owner

Current Issue Owner: @Gonals

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[namhihi237]

Proposal

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

The app should display a loading animation on pasting text in the search

What is the root cause of that problem?

We use search as the state when passing it here:

App/src/pages/SearchPage.js

Lines 135 to 137 in a4e3ae2

	const onChangeText = (value = '') => {
	Report.searchInServer(searchValue);
	setSearchValue(value);

But initially, the value is empty so when pasted, searchValue still has an empty value so the loading is not displayed.

App/src/libs/actions/Report.ts

Lines 2563 to 2567 in a4e3ae2

	function searchInServer(searchInput: string) {
	if (isNetworkOffline || !searchInput.trim().length) {
	Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
	return;
	}

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

We should pass in using value instead of searchValue.

App/src/pages/SearchPage.js

Lines 135 to 136 in a4e3ae2

	const onChangeText = (value = '') => {
	Report.searchInServer(searchValue);

What alternative solutions did you explore? (Optional)

N/A

[neonbhai]

Proposal

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

Search - No loading animation when pasting text for first time

What is the root cause of that problem?

This happens as the order of statements is wrong here:

App/src/pages/SearchPage.js

Lines 135 to 138 in a4e3ae2

	const onChangeText = (value = '') => {
	Report.searchInServer(searchValue);
	setSearchValue(value);
	};

What changes do you think we should make in order

We should move up setting the state, before calling the backend function with the searchValue state:

We will change:

App/src/pages/SearchPage.js

Lines 135 to 138 in a4e3ae2

	const onChangeText = (value = '') => {
	Report.searchInServer(searchValue);
	setSearchValue(value);
	};

To:

 const onChangeText = (value = '') => { 
     setSearchValue(value); 
     Report.searchInServer(searchValue); 
 }; 

[Pujan92]

Proposal

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

On first text change the search loader isn't displayed

What is the root cause of that problem?

In this PR commit while merging it seems the conflict isn't resolved correctly. Due to that instead of value it is passing searchValue.

App/src/pages/SearchPage.js

Lines 135 to 138 in a4e3ae2

	const onChangeText = (value = '') => {
	Report.searchInServer(searchValue);
	setSearchValue(value);
	};

cc: @TMisiukiewicz

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

Correct the passed variable with value instead searchValue.

[shubham1206agra]

@namhihi237's proposal looks good to me.

🎀 👀 🎀 C+ Reviewed