[$250] [HOLD for payment 2024-06-13] HIGH: [API Reliability] Add cancel function when you select an option in search and navigate away from the optionList

[muttmuure]

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

---

What performance issue do we need to solve?

e.g. memory consumption, storage read/write times, React native bridge concerns, inefficient React component rendering, etc.

Currently, when you use search in New Expensify, we show results progressively and put the "best result" at the top. However a query for the full optionList always finishes after you've started it, even if you navigate away from the page that is performing the command.

What is the impact of this on end-users?

List specific user experiences that will be improved by solving this problem e.g. app boot time, time to for some interaction to complete, etc.

When you have navigated to the page you actually want, that page is a little slow because there is an expensive operation still running in the background.

List any benchmarks that show the severity of the issue

Please also provide exact steps taken to collect metrics above if any so we can independently verify the results.

Proposed solution (if any)

Please list out the steps you think we should take to solve this issue.

Create a new "cancel" API command that ceases the operation of querying search when you navigate to the report you've selected from the optionList.

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Note: These should be the same as the benchmarks collected before any changes.

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

Version Number:
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on Upwork

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0164d3f1e9ba4d7d59
• Upwork Job ID: 1801734919193659319
• Last Price Increase: 2024-06-14

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[adhorodyski]

Isn't the need more on cancelling the frontend request, like with an https://developer.mozilla.org/en-US/docs/Web/API/AbortController?

[muttmuure]

Ah, yeah probably. Apologies as I didn't fully understand this one, you might be right

[muttmuure]

Would you be interested in taking it on?

[adhorodyski]

sure, let's do it - you can assign this to me

[adhorodyski]

@muttmuure I won't be available in the next few days, sharing my findings from today. I'm looping in the Callstack team to take over in our morning :)

---

Research

Each API.read command like searchForReports can be manually aborted when having a canCancel data parameter, but this relies on a single AbortController instance for all the requests. We could manually trigger cancellation here this way:

const selectReport = (option: OptionData) => {
        console.log('Navigating to a report', option);
        if (!option) {
            return;
        }

+      HttpUtils.cancelPendingRequests();

        if (option.reportID) {
            setSearchValue('');
            Navigation.dismissModal(option.reportID);
        } else {
            Report.navigateToAndOpenReport(option.login ? [option.login] : []);
        }
    };

...but it'd cancel everything that is currently running, potentially not only our Search queries (which we have multiple when typing even slightly slower).

---

Options

1. Test the above solution on a build, it may be that it's totally safe to run a regular full cancellation there.
2. Add per-query cancellation, which will require using a separate abort controller for this API command we can call .abort() on when selecting a report.

[rinej]

@muttmuure hello I am Tomek from Callstack, I will take it over from Adam

[muttmuure]

Thanks!