[Due for payment 2026-07-23] Expense - Allow location access modal is missing image

[applause-bot]

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.4.34-12
Reproducible in staging?: Yes
Reproducible in production?: No
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/64635567/folder/13176877/41237360/1567083225?sort=-identifier
Email or phone of affected tester (no customers): sidbhisdhidhisdhis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to self DM.
3. Click + > Create expense > Scan.
4. Upload a receipt.
5. Click Create expense.

Expected Result:

Allow location access modal will show the image.

Actual Result:

Allow location access modal is missing image.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7209287_1784141786793.15.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7209287

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/a756cd34525e6b3d68e881452df5c9b70789e1ec7257c11fed9d6707d1ad90bb

[melvin-bot]

Triggered auto assignment to @mollfpr (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

Root Cause

This is a regression from [CP Stg] PR #96164 ("Fix memoized icon crashes", merged today 2026-07-15 06:45 UTC — on staging, not yet production, which matches "Reproducible in production?: No").

That PR changed resolveIconComponent in src/hooks/useLazyAsset.ts:11-17 so that any asset which is a valid React element falls back to PlaceholderIcon:

if (asset == null || isValidElement(asset)) {
    return fallback; // <- PlaceholderIcon
}

On web, the OXC React Compiler memoizes the illustration's <svg /> into a pre-rendered element rather than a component reference (this is exactly the mechanism PR #96164's own description calls out). So for illustrations loaded via the single-asset path, resolveIconComponent now returns the fallback — and PlaceholderIcon renders a completely empty <Svg>. That empty SVG is the "missing image."

The "Allow location access" modal pulls its image through this path — LocationPermissionModal/index.tsx:29 → useMemoizedLazyAsset(() => loadIllustration('ReceiptLocationMarker')) → rendered at line 156.

PR #96164 fixed the crash for the multi-icon hook (useMemoizedLazyExpensifyIcons) by removing the fusion useMemo, but the single-asset useMemoizedLazyAsset path (used by illustrations) still receives a memoized element and silently degrades to an empty placeholder instead of crashing.

Impact is broad, not just this modal: ~19 call sites use useMemoizedLazyAsset(() => loadIllustration(...)), so many illustrations are likely blank on web in this build.

Recommended Fix

Make the single-asset illustration path return a real component instead of dropping to an empty placeholder. Two viable options:

1. Preferred (targeted): In resolveIconComponent, when the asset is a memoized element, return the underlying component reference ((asset as ReactElement).type) instead of fallback, since ImageSVG requires a component (src as React.FC<SvgProps>). This restores rendering without reintroducing the crash.
2. Alternatively, apply the same anti-fusion treatment PR [CP Stg] Fix memoized icon crashes #96164 used for useMemoizedLazyExpensifyIcons to the useMemoizedLazyAsset / loadIllustration path so OXC never memoizes the illustration into an element.

If a fix can't be verified quickly, reverting PR #96164 restores the illustrations — but note it reintroduces the crashes in #96158 / #96159 / #96161, so option 1 is preferable for a deploy blocker.

Investigation details & evidence chain

• Timing: Issue reported 2026-07-15 19:09 UTC; only touch to useLazyAsset.ts that day was PR [CP Stg] Fix memoized icon crashes #96164 (merged 06:45 UTC). Staging-only ⇒ CP-to-staging PR, matches.
• Web-only: OXC React Compiler runs on the web build; native uses Babel. The memoize-to-element behavior is web-specific, matching the reported platforms (Windows/MacOS Chrome/Safari) and "not reproducible in production."
• Before → after: old code was typeof asset === 'function' ? asset : fallback; new code returns fallback for isValidElement(asset). When OXC turns the SVG into an element, the new code chooses the empty PlaceholderIcon.
• Symptom match: PlaceholderIcon is an intentionally empty <Svg> (maintains dimensions, no content) → renders as blank space where the illustration should be = "missing image," modal otherwise intact.
• Alternative explanations considered: a bad/missing SVG asset (ruled out — simple-illustration__receipt-location-marker.svg exists and the chunk exports it correctly); a modal-specific bug (ruled out — the shared lazy-asset path is the common factor and ~19 illustration call sites share it).

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/96207) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[MelvinBot]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #96164 - "[CP Stg] Fix memoized icon crashes" by @roryabraham (High confidence)
Related Issues: #96158, #96159, #96161 (crashes fixed by #96164), #96115 (original memoization change)

Recommendation: ROLL FORWARD

A clean, targeted forward-fix restores the illustrations without reintroducing the crashes in #96158 / #96159 / #96161. A revert of #96164 would bring those crashes back, so it is the worse option for this deploy blocker.

Assigned: @roryabraham (PR author), @robertjchen (approving reviewer)
Labels: No change — DeployBlockerCash kept (App PR caused the regression; App deploy remains blocked). DeployBlocker was not present.

📋 Detailed Analysis

Evidence

• PR [CP Stg] Fix memoized icon crashes #96164 is item iOS crashes due to "Promise.allSettled is not a function" #127 in the current StagingDeployCash (Deploy Checklist: New Expensify 2026-07-14 #96044, release 9.4.34-12), labeled CP Staging, merged 2026-07-15 06:45 UTC by @roryabraham, approved by @robertjchen. It is a CP-to-staging PR that has not reached production — matching the report "Reproducible in production?: No".
• The PR is the only change to src/hooks/useLazyAsset.ts in this release window, and the affected modal image is loaded exclusively through that hook.
• Web-only symptom (Windows/MacOS Chrome/Safari) is consistent with the OXC React Compiler (web build) memoizing illustration SVGs into pre-rendered elements; native uses Babel and is unaffected.

Verification

• Affected file: src/components/LocationPermissionModal/index.tsx:29 calls useMemoizedLazyAsset(() => loadIllustration('ReceiptLocationMarker')), rendered at index.tsx:156 via iconSource.
• PR [CP Stg] Fix memoized icon crashes #96164 diff (confirmed via gh pr diff): added resolveIconComponent and routed useMemoizedLazyAsset through it:
  • src/hooks/useLazyAsset.ts:11-17 — resolveIconComponent returns fallback when asset == null || isValidElement(asset).
  • src/hooks/useLazyAsset.ts:102 — useMemoizedLazyAsset now returns resolveIconComponent(asset, fallback ?? PlaceholderIcon).
• PlaceholderIcon (src/components/Icon/PlaceholderIcon.tsx:10-22) renders an intentionally empty <Svg> — this empty SVG is the "missing image."
• ImageSVG (src/components/ImageSVG/index.tsx:12) treats src as React.FC<SvgProps>, i.e. it expects a component reference, not a pre-rendered element.
• 19 call sites use useMemoizedLazyAsset(() => loadIllustration(...)), so multiple illustrations are likely blank on web in this build — not just this modal.

Root Cause

Before #96164, useMemoizedLazyAsset returned the asset directly. On web, the OXC React Compiler memoizes the illustration's <svg /> into a pre-rendered React element rather than a component reference. #96164's new resolveIconComponent treats any isValidElement(asset) as invalid and substitutes the empty PlaceholderIcon. The PR fixed the crash for the multi-icon hook useMemoizedLazyExpensifyIcons, but for the single-asset illustration path the memoized element now silently degrades to an empty placeholder instead of rendering the illustration → missing image.

Suggested forward-fix (for the assignees)

Instead of dropping to the empty placeholder, resolveIconComponent could return the underlying component reference for a memoized element ((asset as ReactElement).type), which is what ImageSVG needs. Alternatively, apply the same anti-fusion treatment used for useMemoizedLazyExpensifyIcons to the useMemoizedLazyAsset / loadIllustration path so OXC never memoizes the illustration into an element. Either restores rendering without reintroducing #96158 / #96159 / #96161.