No loading state when clicking on scroll bar in filters in Spend menu

[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.3.82-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #90029
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Macbook Pro 2023 / Tahoe 26.4.1
App Component: Other

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a beta account
3. Go to Spend > Filter > From (Or any filter with several results)
4. Click on the scroll bar and slide it down

Expected Result:

User expects all results to render and if not rendered, show a loading state

Actual Result:

No loading state is shown, just a white background

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7163118_1779763170594.No_loading_state_when_clicking_on_scroll_bar_in_filters.mp4

View all open jobs on GitHub

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

[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/a96c5f1b09f5acbb0b50f985dd459441b574b02611958f37f5cb10152cc4e0d1

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #90029

[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

What is the root cause of that problem?

The FlashList in BaseSelectionList.tsx:613 is missing the estimatedItemSize prop. FlashList requires this prop to accurately calculate scroll content layout — without it, when a user grabs the scrollbar and drags quickly, FlashList cannot recycle and render items fast enough, producing blank white space.

This became visible after PR #90029 introduced the constrained 520px filter popover (AdvancedFiltersPopup.tsx:32), where virtualization issues are pronounced because only ~8 items fit on screen at a time.

Additionally, the loading placeholder at BaseSelectionList.tsx:608 only renders when data.length === 0 — there is no mechanism for showing placeholders for items FlashList hasn't rendered yet during fast scrolling.

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

1. Add estimatedItemSize to the FlashList in BaseSelectionList.tsx — this should be set to variables.optionRowHeight (64px), matching the actual row height. This is FlashList's primary mechanism for accurate scroll layout and will significantly reduce blank areas during fast scrolling.

2. Increase drawDistance on the same FlashList to pre-render more items beyond the visible viewport (e.g., drawDistance={500}), which gives FlashList headroom to prepare items before they scroll into view.

What alternative solutions did you explore? (Optional)

• Using overrideItemLayout to provide exact item sizes upfront — this would be more precise but estimatedItemSize should be sufficient since filter list items have uniform height.
• Adding a skeleton/placeholder component for blank areas — FlashList doesn't natively support per-item loading placeholders during recycling, so the estimatedItemSize + drawDistance approach is the standard fix.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.