[Due for payment 2025-12-03] [$250] Expense - After clearing cache, starting per diem flow shows empty state page briefly

[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.44-1
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-1795/folder/13176674/53829876/994331412
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: Money Requests

Action Performed:

1. Launch app
2. Create a workpace and set it as default
3. Create another workspace - enable per diem - upload per diem rates
   4.Go to troubleshoot and clear cache
4. Go to inbox
5. Tap Fab - create expense - per diem

Expected Result:

After clearing cache, starting per diem flow musn't show empty state page briefly.

Actual Result:

After clearing cache, starting per diem flow shows empty state page 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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021986272881400271924
• Upwork Job ID: 1986272881400271924
• Last Price Increase: 2025-11-20

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

Expense - After clearing cache, starting per diem flow shows empty state page briefly

What is the root cause of that problem?

When cache is cleared, customUnit?.rates becomes empty and shouldShowEmptyState becomes true.

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

Lines 76 to 77 in eb1b8f1

	const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata);
	const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline;

The component then fetches the per diem rates via fetchPerDiemRates in the useEffect, but there's no loading state tracking this fetch operation. The isLoading variable only tracks policyMetadata loading status, not the per diem rates fetch

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

Lines 124 to 130 in eb1b8f1

	useEffect(() => {
	if (!isEmptyObject(customUnit?.rates) || isOffline) {
	return;
	}
	fetchPerDiemRates(policy?.id);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isOffline]);

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

We can add a local state to track per diem rates fetching

    const [isLoadingPerDiemRates, setIsLoadingPerDiemRates] = useState(false);

Then update the useEffect that fetches rates

    useEffect(() => {
        if (!isEmptyObject(customUnit?.rates) || isOffline) {
            setIsLoadingPerDiemRates(false);
            return;
        }
        setIsLoadingPerDiemRates(true);
        fetchPerDiemRates(policy?.id);
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [isOffline]);

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

Lines 124 to 130 in eb1b8f1

	useEffect(() => {
	if (!isEmptyObject(customUnit?.rates) || isOffline) {
	return;
	}
	fetchPerDiemRates(policy?.id);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isOffline]);

We also need to add another useEffect to reset loading state when rates are loaded

    useEffect(() => {
        if (customUnit?.rates !== undefined) {
            setIsLoadingPerDiemRates(false);
        }
    }, [customUnit?.rates]);

Then update isLoading and shouldShowEmptyState to include the per diem fetch state

    const isLoading = (!isOffline && isLoadingOnyxValue(policyMetadata)) || isLoadingPerDiemRates;
    const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline && !isLoadingPerDiemRates;

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

Lines 76 to 77 in eb1b8f1

	const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata);
	const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline;

What alternative solutions did you explore? (Optional)

None

[paulnjs]

Proposal

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

After clearing the cache, starting the per diem flow briefly displays an empty state page.

What is the root cause of that problem?

When the per diem data is loading via this call:

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

Line 128 in 5279e0b

fetchPerDiemRates(policy?.id);

the shouldShowEmptyState variable is set to true:

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

Line 77 in 5279e0b

const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline;

As a result, the empty state is shown while the per diem data is still loading.

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

We should update the isLoading calculation at:

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

Line 76 in 5279e0b

const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata);

to include the isLoadingPerdiem flag. The updated logic should look like:

const isLoading = !isOffline && (isLoadingOnyxValue(policyMetadata) || policy?.customUnits?.isLoadingPerdiem);
const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline && !isLoading;

The isLoadingPerdiem flag is set to true optimistically in fetchPerDiemRate, and reset to null in both successData and failureData:

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

Line 395 in 5279e0b

function fetchPerDiemRates(policyID: string | undefined) {

What alternative solutions did you explore? (Optional)

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-18 04:46:10 UTC.

Proposal

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

After clearing cache and restart, per diem destination page shows empty state briefly.

What is the root cause of that problem?

The empty state view will show if the per diem custom unit rates are empty.

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

Line 77 in 4ad44ed

const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline;

After clearing cache and restart, the policy object doesn't have the customUnits field and only loaded here.

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

Lines 124 to 130 in 4ad44ed

	useEffect(() => {
	if (!isEmptyObject(customUnit?.rates) || isOffline) {
	return;
	}
	fetchPerDiemRates(policy?.id);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isOffline]);

The loading will only show if the policy onyx data is loading.

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

Line 76 in 4ad44ed

const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata);

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

We can show the loading if the custom units is missing and prevent showing the empty state if it's loading.

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

Lines 76 to 77 in f34c0e3

	const isLoading = !isOffline && isLoadingOnyxValue(policyMetadata);
	const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline;

const isLoading = !isOffline && (!customUnit?.rates || isLoadingOnyxValue(policyMetadata));
const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && !isOffline && !isLoading;

After clear cache and restart, customUnit?.rates will be undefined, so the loading will show. After loaded, if the rates is empty, !customUnit?.rates will evaluate to false, so the loading won't show if the rates is empty.

[melvin-bot]

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

[melvin-bot]

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

[IjaazA]

Proposal

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

After clearing cache and starting the per diem expense creation flow, an empty state page is briefly displayed before the per diem destination picker appears. The expected behavior is that the empty state should not appear at all when starting the per diem flow after clearing cache.

What is the root cause of that problem?

The issue occurs because when cache is cleared, the per diem rates are not yet loaded in Onyx when the IOURequestStepDestination component mounts. The component checks if customUnit?.rates is empty and immediately shows the empty state page, even though rates are being fetched asynchronously.

The logic flow is:

1. Component mounts with empty rates (cache was cleared)
2. shouldShowEmptyState evaluates to true because isEmptyObject(customUnit?.rates) is true
3. Empty state is rendered briefly
4. useEffect then calls fetchPerDiemRates() to load the rates
5. Once rates are loaded, the empty state disappears and the destination picker is shown

The problem is that the component doesn't distinguish between:

• Rates are loading (after cache clear) → should show loading indicator
• Rates are truly empty (no rates configured) → should show empty state

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

Add logic to track whether we've initiated a fetch for per diem rates, and show a loading state instead of empty state when rates are expected but not yet loaded.

Pseudo Code:

// Track if we've initiated a fetch to distinguish between "rates are loading" and "rates are truly empty"
const hasInitiatedFetch = useRef(false);

// If per diem is enabled but rates are empty, we might be loading them after cache clear
// Show loading state instead of empty state to prevent brief empty state flash
// Once we've fetched and confirmed rates are empty, show empty state
const isPerDiemEnabled = policy?.arePerDiemRatesEnabled === true;

// Show loading if: per diem is enabled, rates are empty, we're online, policy is loaded, 
// and we haven't confirmed rates are empty yet
const isRatesLoading = isPerDiemEnabled && 
    isEmptyObject(customUnit?.rates) && 
    !isOffline && 
    !isLoadingOnyxValue(policyMetadata) && 
    !hasInitiatedFetch.current;

// Only show empty state if rates are empty AND we've already initiated fetch 
// (meaning we've confirmed they're truly empty)
const shouldShowEmptyState = isEmptyObject(customUnit?.rates) && 
    !isOffline && 
    hasInitiatedFetch.current;

// In the useEffect that fetches rates:
useEffect(() => {
    if (!isEmptyObject(customUnit?.rates) || isOffline) {
        return;
    }
    hasInitiatedFetch.current = true; // Mark that we've started fetching
    fetchPerDiemRates(policy?.id);
}, [isOffline]);

// Show loading indicator when either policy is loading or rates are loading
{(isLoading || isRatesLoading) && (
    <ActivityIndicator />
)}

The fix:

1. Uses a useRef to track whether we've initiated a fetch for rates
2. Shows loading state when per diem is enabled but rates are empty (indicating they're being loaded)
3. Only shows empty state after we've confirmed rates are empty (after fetch completes)
4. Updates the loading indicator to show when rates are loading in addition to when policy is loading

This ensures that when cache is cleared, the component shows a loading indicator instead of briefly flashing the empty state, providing a better user experience.

What alternative solutions did you explore? (Optional)

Check if policy has per diem enabled before showing empty state: We could check policy?.arePerDiemRatesEnabled before showing empty state, but this alone doesn't distinguish between "loading" and "truly empty" states. We need to track fetch state.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸