[$250] RHP - Endless loading displayed on RHP Categories page during "Categorize It" flow

[jponikarchuk]

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: applausetester+omtrack09271@applause.expensifail.com
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-961/folder/13176877/41237354/920381718
Email or phone of affected tester (no customers): applausetester+omtrack09271@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Macbook Pro 15" 2019/Sequoia 15.7, Mac/Chrome, iPhone 15 Pro Max/iOS 26, Pixel 6/Chrome
App Component: Other

Action Performed:

Precondition: The expensifail account should not have any created workspaces.

1. Open app
2. Sign up to expensifail account
3. Open OD (staging.expensify.com) in browser in a new tab
4. [OD} sign in with same expensifail account from step 2
5. [OD] Create an unreported expense (select "None" option in the Report field)
6. Navigate back to ND app
7. Navigate to Self DM
8. Click on plus button and create a manual expense with any amount
9. Click on "Categorize it" option
10. Click on "Upgrade" option
11. Click on "Confirm" button to create a workspace
12. Click on "Got It" button

Expected Result:

User navigated to Categories page in RHP and categories list should be loaded

Actual Result:

User navigated to Categories page in RHP and endless loading displayed

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021972741683484050621
• Upwork Job ID: 1972741683484050621
• Last Price Increase: 2025-09-29

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-02 03:02:17 UTC.

Proposal

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

RHP - Endless loading displayed on RHP Categories page during "Categorize It" flow

What is the root cause of that problem?

Policy object resolution failure in the IOURequestStepCategory component when accessing a newly created workspace through the categorization flow

1. User creates a new workspace through the "Upgrade" flow
2. User navigates to categorize an expense in that new workspace
3. isExpenseUnreported = false (because it's a regular expense, not unreported)
4. policyReal = undefined (policy not loaded in real collection)
5. policyDraft = undefined (policy not loaded in draft collection)

Result: policy = undefined --> Loading state

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Line 62 in d3dcb0d

const policy = isExpenseUnreported ? activePolicy : (policyReal ?? policyDraft);

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

It might be fixed by update the backTo condition here. However, I think we shouldn't rely on backTo since it will be removed soon (reference: #67284). Instead, we update the logic in IOURequestStepCategory for better handling for the case newly created workspace

We have to update this logic to fallback to activePolicy if no policy in policyReal or policyDraft

    const {accountID} = useCurrentUserPersonalDetails();

    const policy = isExpenseUnreported ? activePolicy : (policyReal ?? policyDraft ?? activePolicy);

    const workspaceExpenseReport = policy?.id && action === CONST.IOU.ACTION.CATEGORIZE ? getPolicyExpenseChat(accountID, policy.id) : undefined;
    const reportToUse = workspaceExpenseReport ?? report;

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Line 62 in d3dcb0d

const policy = isExpenseUnreported ? activePolicy : (policyReal ?? policyDraft);

Then inhere, we should update to navigate to correct page based on report we are using

        if (action === CONST.IOU.ACTION.CATEGORIZE) {
            if (reportToUse?.reportID) {
                const confirmationRoute = ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, reportToUse.reportID);
                Navigation.navigate(confirmationRoute);
            }

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Lines 133 to 136 in d3dcb0d

	if (action === CONST.IOU.ACTION.CATEGORIZE && !backTo) {
	if (report?.reportID) {
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, report.reportID));
	}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[gijoe0295]

Proposal

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

Endless loading displayed on RHP Categories page during "Categorize It" flow

What is the root cause of that problem?

We're moving the track expense to the new workspace so the destination report should be the policy expense chat. But in upgrade flow, we're using the self DM reportID:

App/src/pages/iou/request/step/IOURequestStepUpgrade.tsx

Line 90 in 3d2353c

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID, ROUTES.REPORT_WITH_ID.getRoute(reportID)));

Self DM report's policyID is _FAKE_ so we cannot find the destination workspace here.

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

From #69878, we have 2 categorizing scenarios and they are differentiated via shouldSubmitExpense URL param:

• Moving to the workspace then categorize it (via the Categorize it actionable whisper button in self DM - shouldSubmitExpense: true here)
• Categorize an unreported expense (via the Category push row in IOU report details view shouldSubmitExpense: false), this has just been implemented recently in the above PR => That's why they set the reportID as the self DM report.

1. Rename shouldSubmitExpense to isMovingTrackExpense for better semantics that indicates we're moving the track expense to the new workspace
2. If we're moving the track expense, the reportID URL param should be the new workspace expense report ID and do not specify backTo. So:

App/src/pages/iou/request/step/IOURequestStepUpgrade.tsx

Line 90 in 3d2353c

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, CONST.IOU.TYPE.SUBMIT, transactionID, reportID, ROUTES.REPORT_WITH_ID.getRoute(reportID)));

becomes:

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(
    action,
    CONST.IOU.TYPE.SUBMIT,
    transactionID,
    isMovingTrackExpense ? expenseReportID : reportID,
    isMovingTrackExpense ? undefined : ROUTES.REPORT_WITH_ID.getRoute(reportID),
));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

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

[melvin-bot]

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

[Ollyws]

@lorretheboy's proposal LGTM.

🎀👀🎀 C+ reviewed

[melvin-bot]

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