[$250] Workspace - Import button is shown briefly after importing members

[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: V9.2.45-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1740/folder/13177080/41237935/991934949?p=2
Email or phone of affected tester (no customers): Slottwo1 72old.approver@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Login with gmail account
3. Go to workspace settings -members
4. Tap settings - import spreadsheet - choose members file
5. Import
6. Advance approval upgrade modal is shown
7. Tap upgrade
8. Choose members file and import members
9. Tap Got it

Expected Result:

Import button must not be shown briefly after importing members.

Actual Result:

Import button is shown briefly after importing members.

Note : If we import independent dependent tags file, we don't see import button briefly.

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

1.mp4

members file.csv

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987795533429300522
• Upwork Job ID: 1987795533429300522
• Last Price Increase: 2025-11-17

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Workspace - Import button is shown briefly after importing members

What is the root cause of that problem?

When the user clicks "Got it" on the success modal, navigation back to the members page is delayed using InteractionManager.runAfterInteractions in the onModalHide callback. During this delay, the page briefly remains visible before navigation completes

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 201 to 207 in 4beeb98

	<ImportSpreadsheetConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal}
	closeImportPageAndModal={closeImportPageAndModal}
	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
	}}

Other import pages (tags, categories, per diem) don't have this issue because they navigate immediately in their closeImportPageAndModal without using onModalHide

App/src/pages/workspace/tags/ImportedTagsPage.tsx

Lines 155 to 158 in 4beeb98

	<ImportSpreadsheetConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened}
	closeImportPageAndModal={closeImportPageAndModal}
	/>

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

We can move the navigation logic from onModalHide into closeImportPageAndModal function to match the pattern used in other import pages

    const closeImportPageAndModal = () => {
        setIsClosing(true);
        setIsImporting(false);
        Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID));
    };

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 176 to 180 in 4beeb98

	const closeImportPageAndModal = () => {
	setIsClosing(true);
	setIsImporting(false);
	setShouldShowConfirmModal(false);
	};

Then remove the onModalHide prop from ImportSpreadsheetConfirmModal and setShouldShowConfirmModal check to match the pattern on ImportedTagsPage

    <ImportSpreadsheetConfirmModal
        isVisible={spreadsheet?.shouldFinalModalBeOpened}
        closeImportPageAndModal={closeImportPageAndModal}
    />

App/src/pages/workspace/members/ImportedMembersPage.tsx

Lines 201 to 208 in 4beeb98

	<ImportSpreadsheetConfirmModal
	isVisible={spreadsheet?.shouldFinalModalBeOpened && shouldShowConfirmModal}
	closeImportPageAndModal={closeImportPageAndModal}
	onModalHide={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => Navigation.goBack(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)));
	}}
	/>

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

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

[melvin-bot]

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