[Payment due 08-23][$250] Expensify card - Expensify card page content is reloaded upon navigating back

[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: 9.0.25-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #47844

Action Performed:

1. Log in with an expensifail account
2. Create a workspace
3. Navigate to Workspace settings - More features
4. Enable "Expensify Card"
5. Navigate to Workspace settings - Expensify Card
6. Click on the "Issue new card" button
7. Click on the "<" button next to "Choose bank account"

Expected Result:

It shouldn't reload

Actual Result:

Expensify card page content is reloaded upon navigating back. On mWeb, it only reloads if you background the app and open it again

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

Bug6584394_1724779750139.bandicam_2024-08-27_19-23-53-146.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c51dda0396acf8a0
• Upwork Job ID: 1828835425848218614
• Last Price Increase: 2024-09-04

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

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

[lanitochka17]

@Christinadobrzyn FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[bernhardoj]

Proposal

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

Expensify card page reloads every time the page gets refocused.

What is the root cause of that problem?

We have a useFocusEffect to fetch the card data.

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Lines 30 to 36 in 1bb1131

	const fetchExpensifyCards = useCallback(() => {
	Policy.openPolicyExpensifyCardsPage(policyID, workspaceAccountID);
	}, [policyID, workspaceAccountID]);
	const {isOffline} = useNetwork({onReconnect: fetchExpensifyCards});
	useFocusEffect(fetchExpensifyCards);

This is a common pattern within the workspace page, for example, in categories.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 78 to 82 in 1bb1131

	useFocusEffect(
	useCallback(() => {
	fetchCategories();
	}, [fetchCategories]),
	);

The refetch will set the cardSettings.isLoading to true and based on the condition below, it will show the loading indicator (the cardSettings object only contains isLoading at this point).

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Lines 47 to 53 in 1bb1131

	{isLoading && (
	<ActivityIndicator
	size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
	style={styles.flex1}
	color={theme.spinner}
	/>
	)}

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 39 in 1bb1131

const isLoading = !isOffline && (!cardSettings || (cardSettings.isLoading && Object.keys(cardSettings).length === 1));

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

If we don't want to show the loading every time we refetch the data, we can change the condition to check whether the data exists or not.

const isLoading = !isOffline && (!cardSettings || !cardsList);

[cretadn22]

Proposal

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

Expensify card page reloads every time the page gets refocused.

What is the root cause of that problem?

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 36 in 1bb1131

useFocusEffect(fetchExpensifyCards);

We fetch data every time the screen is focused. When we call the OpenPolicyExpensifyCardsPage API, we set cardSetting.isLoading to true in optimisticData. This causes the page to display a loading indicator each time it is re-focused.

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

The cardSettings condition is unnecessary because it always contains the isLoading field and is always truthy. We only need to ensure that cardsList is available before displaying it. If there are no cards, the backend returns cardSetting as undefined, so we don't need to include cardSetting in the condition for displaying the offline indicator. cardSetting

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 39 in 1bb1131

const isLoading = !isOffline && (!cardSettings || (cardSettings.isLoading && Object.keys(cardSettings).length === 1));

const isLoading = !isOffline && !cardsList;

We should remove the isLoading field from cardSettings by eliminating the optimistic data, success data, and failure data in the openPolicyExpensifyCardsPage API.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[Christinadobrzyn]

This is pretty minor, I don't know if we need to do this. @aimane-chnaif what do you think?