[$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 [email protected] 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

[melvin-bot]

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

[miguelesco]

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?

It is sending the value of the search before it get save in the state

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

I will change
https://github.com/Expensify/App/blob/a4e3ae2546882b0971ed80e6ce0fd4c6b85cf956/src/pages/SearchPage.js#L135C4-L138C7
to:
const onChangeText = (value = '') => { setSearchValue(value); };

and:
https://github.com/Expensify/App/blob/a4e3ae2546882b0971ed80e6ce0fd4c6b85cf956/src/pages/SearchPage.js#L81C5-L90C23

to:
useEffect(() => { if (!isMounted.current) { isMounted.current = true; return; } Report.searchInServer(searchValue); updateOptions(); }, [searchValue]);

in this way when the state is properly updated the search is made

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @miguelesco! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[allgandalf]

Proposal

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

No loading animation when pasting text for first time

What is the root cause of that problem?

PR #27924 created this bug as we don't pass value to the search

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

Adding to the above proposals i also propose that we trim the input values to remove any white spaces as below:

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

What alternative solutions did you explore? (Optional)

N/A

[miguelesco]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01751af6e9f5d7c8a2

[melvin-bot]

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

[sophiepintoraetz]

Hi @Gonals - can you take a look at the C+ approved proposal?

[melvin-bot]

📣 @namhihi237 🎉 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 📖

[Gonals]

@namhihi237's proposal looks good to me.

🎀 👀 🎀 C+ Reviewed

Sounds good!

[namhihi237]

@shubham1206agra PR is already for review but I am not sure why the reviewer is incorrect. Can you re-assign C+ for this PR @Gonals . Thanks

[melvin-bot]

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

[CortneyOfstad]

@Gonals bump on the comment here

[Gonals]

@Gonals bump on the comment here

Ah, I already handled it back then 😁

[melvin-bot]

@CortneyOfstad, @Gonals, @namhihi237, @shubham1206agra Huh... This is 4 days overdue. Who can take care of this?

[shubham1206agra]

@Gonals, I think we need to talk about #34846 (comment) here.

[Gonals]

@Gonals, I think we need to talk about #34846 (comment) here.

True. @CortneyOfstad, @namhihi237 worked on a fix for this issue for a while, and it was almost ready. However, the refactor of SearchPage got rid of the issue before their fix merged. What do we do regarding payment in these cases?

[shubham1206agra]

I approved the PR, but it has some performance issues, which were disabled in a separate PR.

[CortneyOfstad]

Reaching out to @Gonals to discuss 👍

[CortneyOfstad]

@shubham1206agra @namhihi237 — after a discussion with the team, it was decided to offer a 50% payment ($250) to both of you for the work put in. If that is okay with you both, I'll get the Upwork proposals sent over ASAP. Thanks for your patience!

[shubham1206agra]

@CortneyOfstad Its ok for me.

[namhihi237]

Thanks i am ok with this

[CortneyOfstad]

Thanks!

@namhihi237 — you've been paid in Upwork, so you're all set!

@shubham1206agra — I sent you a proposal in Upwork, let me know once you accept!

[shubham1206agra]

Done

[CortneyOfstad]

Awesome — thanks! Payments have been completed and sharing the payment summary below!

[CortneyOfstad]

Payment Summary

@namhihi237 (contributor) — paid $250 via Upwork
@shubham1206agra (C+) — paid $250 via Upwork