[Due for payment 2026-03-11] [$250] Dev-The empty Expensify Card Page display briefly in the first time going to Expensify Card

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @DylanDylann
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

Precondition: A workspace with Expensify Card set up and some cards assigned.

1. Clear cache or logout/login
2. Go to the Expensify Card page

Expected Result:

The loading indicator is displayed until the assigned card appears.

Actual Result:

The empty Expensify Card page displays briefly after the loading screen

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Screen.Recording.2026-02-24.at.15.25.13.mov

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022026414123241168345
• Upwork Job ID: 2026414123241168345
• Last Price Increase: 2026-02-24
• Automatic offers:
• FitseTLT | Contributor | 110586254

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

[MelvinBot]

Proposal

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

After clearing cache or logging out/in, navigating to the Expensify Card page briefly shows an empty "Issue your first card" state between the loading indicator disappearing and the actual card list appearing.

What is the root cause of that problem?

There is a race condition in WorkspaceExpensifyCardPage between two independently-loaded Onyx keys: PRIVATE_EXPENSIFY_CARD_SETTINGS and WORKSPACE_CARDS_LIST.

The loading state at line 39 only checks cardSettings.isLoading:

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

This flag is set/cleared by openPolicyExpensifyCardsPage (Policy.ts:3604-3639) via optimistic/success data — but only on PRIVATE_EXPENSIFY_CARD_SETTINGS, not on WORKSPACE_CARDS_LIST.

The cardsList subscription at line 25 uses filterInactiveCards as a selector, which converts undefined (not yet loaded) into {} (empty object) at CardUtils.ts:892-900. The useOnyx metadata status (which indicates 'loading' vs 'loaded') is also discarded — only [cardsList] is destructured.

So when the API response arrives and cardSettings becomes loaded with paymentBankAccountID > 0, the rendering logic at line 45 immediately renders WorkspaceExpensifyCardListPage. But cardsList may still be {} at that point, causing isEmptyObject(cardsList) at WorkspaceExpensifyCardListPage.tsx:253 to be true — which renders EmptyCardView (the flash).

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

Use the useOnyx metadata status to determine whether cardsList has finished loading, and keep showing the loading indicator until it has.

In WorkspaceExpensifyCardPage.tsx:

1. Destructure the metadata from the cardsList useOnyx call: const [cardsList, cardsListResult] = useOnyx(...).
2. Include the cards list loading status in the isLoading condition, e.g.: const isLoading = !isOffline && (!cardSettings || cardSettings.isLoading || cardsListResult.status === 'loading');.

This ensures the FullScreenLoadingIndicator remains visible until both cardSettings and cardsList have been populated in Onyx, eliminating the flash of empty state.

What alternative solutions did you explore? (Optional)

• Modify the filterInactiveCards selector to return undefined instead of {} when the input is undefined, allowing the component to distinguish "not yet loaded" from "genuinely empty." This would work but is more fragile since it requires downstream changes to handle undefined.
• Add optimistic data for WORKSPACE_CARDS_LIST in openPolicyExpensifyCardsPage. This would be more invasive and doesn't address the core issue that the component ignores Onyx loading metadata.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

Dev-The empty Expensify Card Page display briefly in the first time going to Expensify Card

What is the root cause of that problem?

We show loading when the cardSettings.isLoading and paymentAccountID is falsy

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

Lines 39 to 42 in a22f13b

	const isLoading = !isOffline && (!cardSettings || cardSettings.isLoading);
	const renderContent = () => {
	if (!!isLoading && !paymentBankAccountID) {

Although we correctly set cardSettings.isLoading in openPolicyExpensifyCardsPage in this case paymentAccountID will load before cardsList is fetched from BE. So there will be a brief moment where the loading indicator will not be shown before the cardList is loaded which shows empty state page.

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

We don't use cardSettings.isLoading only because we don't want to show loading every time isLoading is set when openPolicyExpensifyCardsPage is called so we should also check for cardlist emptiness

        if (!!isLoading && (isEmptyObject(cardsList) || !paymentBankAccountID)) {

We can also refactor filterInactiveCards to differentiate between undefined and empty cards list to perfectly determine an empty card list from unloaded one.

What alternative solutions did you explore? (Optional)

We can also optionally set hasOnceLoaded on successData on openPolicyExpensifyCardsPage

App/src/libs/actions/Policy/Policy.ts

Lines 3618 to 3620 in a22f13b

	key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`,
	value: {
	isLoading: false,

so that we correctly identify the first load of card settings and only show loading when it is loading plus !hasOnceLoaded to only show loading when the data is first loaded not everytime openPolicyExpensifyCardsPage API is called.

[twinkle-react]

Proposal

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

After a fresh login or cache clear, navigating to the workspace Expensify Card page briefly shows the empty onboarding view (“Issue your first card”) before the assigned cards render because the page displays an empty state while the cards list is still hydrating from Onyx.

What is the root cause of that problem?

In this implementation, the function filterInactiveCards in src/libs/CardUtils.ts assumes that an undefined cardsList can safely be normalized into an empty object, but this is incorrect because undefined represents a not-yet-hydrated Onyx value while {} represents a fully loaded empty dataset, which causes downstream logic to interpret loading data as “no cards” and render the empty state prematurely.

// src/libs/CardUtils.ts
function filterInactiveCards(cardsList: WorkspaceCardsList | undefined) {
    const {cardList, ...assignedCards} = cardsList ?? {};
    const filteredAssignedCards = filterAllInactiveCards(assignedCards);

    return {
        ...(cardList ? {cardList} : {}),
        ...filteredAssignedCards,
    } as WorkspaceCardsList;
}

// src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${defaultFundID}`, {canBeMissing: true});
const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${defaultFundID}_${CONST.EXPENSIFY_CARD.BANK}`, {selector: filterInactiveCards, canBeMissing: true});
...
const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID;
const isLoading = !isOffline && (!cardSettings || cardSettings.isLoading);

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

Include cards-list Onyx metadata in the parent loading calculation so the page waits for cards-list hydration before rendering child components, and add a defensive guard in the list page so selector-normalized empty objects are treated as loading when metadata indicates loading.

// src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
// Add import
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';

// Replace cardsList useOnyx to capture metadata
-const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${defaultFundID}_${CONST.EXPENSIFY_CARD.BANK}`, {selector: filterInactiveCards, canBeMissing: true});
+const [cardsList, cardsListMetadata] = useOnyx(
+    `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${defaultFundID}_${CONST.EXPENSIFY_CARD.BANK}`,
+    {selector: filterInactiveCards, canBeMissing: true},
+);

// Extend isLoading to include cards-list metadata
-const isLoading = !isOffline && (!cardSettings || cardSettings.isLoading);
+const isLoading = !isOffline && (isLoadingOnyxValue(cardsListMetadata) || !cardSettings || cardSettings.isLoading);

// src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
<WorkspaceExpensifyCardListPage
    cardsList={cardsList}
    cardsListMetadata={cardsListMetadata}
    fundID={defaultFundID}
    route={route}
/>

// src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
// Add import
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
import type { ResultMetadata } from 'react-native-onyx';

// Update props type to accept optional metadata
type WorkspaceExpensifyCardListPageProps = {
    route: PlatformStackRouteProp<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>;
    cardsList: OnyxEntry<WorkspaceCardsList>;
    fundID: number;
    cardsListMetadata?: ResultMetadata<WorkspaceCardsList>; // new optional prop
};

// In render: treat normalized empty object as loading while metadata.status === 'loading'
{(isLoadingOnyxValue(cardsListMetadata) || isEmptyObject(cardsList)) ? (
    // If metadata is loading, show a loading indicator (keeps UI consistent); otherwise EmptyCardView as before
    isLoadingOnyxValue(cardsListMetadata) ? (
        <FullScreenLoadingIndicator shouldUseGoBackButton={false} />
    ) : (
        <EmptyCardView ... />
    )
) : (
    <ScrollView> ...cards list... </ScrollView>
)}

What alternative solutions did you explore? (Optional)

Modifying filterInactiveCards to return undefined during loading was considered but rejected because it changes shared selector behavior and risks breaking existing consumers.

[dukenv0307]

@FitseTLTs's RCA is correct and the solution works on my side. Let's go with his proposal

🎀👀🎀 C+ reviewed