[$500] Mweb - Search - When user enters a text in search it shows loading symbol

[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.3.84-0

Reproducible in staging?: Yes

Reproducible in production?: Yes

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. Go to https://staging.new.expensify.com/
2. Tap fab
3. Tap send message
4. Enter a text

Expected Result:

When user enters a text in search, it must not show loading symbol

Actual Result:

When user enters a text in search, it shows loading symbol

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

Android: Native

Android: mWeb Chrome

Bug6237344_1697314730520.5.mp4

Bug6237344_1697314730547.20231015_014725.mp4

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016fa65b305eb408fc
• Upwork Job ID: 1714096811092811776
• Last Price Increase: 2023-10-17

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Krishna2323]

Proposal

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

Mweb - Search - When user enters a text in search it shows loading symbol.

What is the root cause of that problem?

We are setting isSearchingForReports state to true on every input change & before api is called due to reason mentioned below in the code.

App/src/libs/actions/Report.js

Lines 2278 to 2281 in fe282b4

	// Why not set this in optimistic data? It won't run until the API request happens and while the API request is debounced
	// we want to show the loading state right away. Otherwise, we will see a flashing UI where the client options are sorted and
	// tell the user there are no options, then we start searching, and tell them there are no options again.
	Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, true);

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

We should call inside Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, true) optimistic data & for the noResultsFound issue we can set an state inside NewChatPage to set header message empty when any text is entered and set back to it's original value once isSearchingForReports is false again.

    // New state
    const [textChanged, setTextChanged] = useState(false);
    
    // Set text changed to true when text is changed
    const setSearchTermAndSearchInServer = useCallback((text = '') => {
        if (text.length) {
            Report.searchInServer(text);
            setTextChanged(true);
        }
        setSearchTerm(text);
    }, []);
    
    // Set text changed to false once isSearchingForReports is false
    useEffect(() => {
        if (isSearchingForReports) {
            return;
        }

        setTextChanged(false);
    }, [isSearchingForReports]);
    
     // Use ternary operator to show headerMessage
    headerMessage={textChanged ? '' : headerMessage}

Result

loader_in_input.mp4

[melvin-bot]

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

[melvin-bot]

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

[stephanieelliott]

Adding labels to get reviews on the proposal.

[eh2077]

@stephanieelliott I think this is a new feature from PR #27819. If it's a bug, can you help to clarify what the expected behaviour is?

[Santhosh-Sellavel]

@stephanieelliott Seems like this is the expected behavior from #27819

cc: @marcaaron @Beamanator Can you close this one if so, thanks!

[Krishna2323]

@Santhosh-Sellavel, the loader is expected but it appears while typing. it should appear once loading is started.

[Santhosh-Sellavel]

@Krishna2323 It's there already in the comment. Seems intentional

we want to show the loading state right away.

[Krishna2323]

@Santhosh-Sellavel, yes, but its a workaround and due to the workaround we get the loader right away.,every time the loader is shown for 300ms extra and the loader is visible when user is typing, so if I type for 1-2 seconds, the loader will be shown for whole 1-2 seconds plus 300ms extra and then the time consumed by the api. and if we somehow solve that workaround than the loader will be only shown for the time consumed by the api, that may not be more than 50ms-100ms.

[marcaaron]

This is a feature not a bug.

[marcaaron]

@Santhosh-Sellavel, the loader is expected but it appears while typing. it should appear once loading is started.

Nope. It shows as soon as you start typing.