Decompose ReportActionsList: 6#93694
Conversation
be8dc63 to
846c47a
Compare
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
38389bf to
614d282
Compare
Add src/pages/inbox/ReportActions.tsx as the route-only orchestrator that owns the coarse branching (skeleton / money-request table view / chat list) and subscribes to only what those branches need. ReportScreen now mounts it instead of the old 58-LOC inbox/ReportActionsList.tsx wrapper, which is removed. ReportActionsView stays for now (still used by MoneyRequestReportView) and is deleted in the next commit. The app-load skeleton is hoisted out of the hook-driven body into the orchestrator so the body's data hooks/effects never run during app boot. It is evaluated on the chat path only (after the money-request branch) to preserve the prior behavior, where that skeleton lived inside the chat-only ReportActionsView, and it owns the warm:false markOpenReportEnd telemetry for the branch it gates. Add tests/ui/ReportActionsTest.tsx covering the orchestrator's branching decisions and the app-load telemetry mark.
614d282 to
5ec39cb
Compare
|
@DylanDylann Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5ec39cb02e
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e93921114a
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2c4a6ea5e7
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ce3e927a32
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
@codex review |
|
Codex Review: Didn't find any major issues. Breezy! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
@DylanDylann I looked into splitting this and I don't think it's worth it, split would be like 5% + 95% of changes. What is good, its mostly copy/pasting and unit tests. I updated PR description to make it a bit easier. Also with last commits number of changes reduced a lot so it should be a bit easier. Ready for review |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-06-26.at.17.57.43.movAndroid: mWeb ChromeScreen.Recording.2026-06-26.at.17.48.55.moviOS: HybridAppScreen.Recording.2026-06-26.at.17.50.08.moviOS: mWeb SafariScreen.Recording.2026-06-26.at.17.47.53.movMacOS: Chrome / SafariScreen.Recording.2026-06-26.at.17.45.21.mov |
DylanDylann
left a comment
There was a problem hiding this comment.
Thanks @LukasMod. It's great job
|
@rlinoz Just a note: the failed Reassure Performance Tests are intentional |
|
new conflicts resolved |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 rlinoz has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/rlinoz in version: 9.4.25-0 🚀
|
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.4.25-2 🚀
Bundle Size Analysis (Sentry): |

Explanation of Change
This splits the old
ReportActionsViewinto three pieces: a route-only orchestrator that decides what to render, a skeleton guard that owns the data pipeline and gates rendering, and a hook-driven body that renders the chat list. There are no user-facing behavior changes. This is a structural refactor.Changes
src/pages/inbox/ReportActions.tsx: a route-only orchestrator. It owns the coarse branching: the early skeleton states, the choice between the money-request table and the chat list, and mountingUserTypingEventListener. The app-load skeleton is hoisted here so the body's hooks never run during app boot — except for Concierge, which is excluded so the body stays mounted under that skeleton and can seed its session, matching the oldReportActionsView.src/hooks/useReportActionsListModel.ts: the single read-and-derive pipeline for the list. It runs the subscriptions and derivations once (sort, paginate, visibility, concierge) and returns three projections:readinessSignals(kept off the context, feeds the skeleton decision),state(the render payload), andactions(the command handles: load older, load newer, show previous messages).src/pages/inbox/report/ReportActionsSkeletonGuard.tsx: ownsuseReportActionsListModel, makes the skeleton-versus-content decision (computeReportActionsSkeletonState), runs the effects that must fire while the skeleton shows (copy-selection, pending-concierge, concierge-session start, cold-open telemetry), and providesstateandactionsto the body. It is modeled onReportNotFoundGuard: it returns early with the skeleton before the body mounts, so the body's hooks and effects never run during the skeleton phase.src/pages/inbox/report/ReportActionsListContext.tsx: splits the pipeline output into two contexts.ReportActionsListStateContextcarries the render state that changes often, and it is the only slice that drives list re-renders.ReportActionsListActionsContextcarries the command handles, which keep a stable identity, so a consumer that reads only the handles does not re-render when new actions arrive. This follows the State/Actions split thatConciergeSessionContextalready uses.src/pages/inbox/report/ReportActionsList.tsx(the body) is now hook-driven. Its props shrink to{reportID, onLayout?}. It reads the pipeline output from the two contexts and holds only the UI-close hooks (useUnreadMarker,useMarkAsRead,useReportActionsScroll). Those hooks cannot run while the skeleton shows, because the guard mounts the body only once content is ready.src/hooks/useMarkOpenReportEndOnSkeleton.ts: a shared hook that closes the open-report telemetry span as a cold open (markOpenReportEnd(report, {warm: false})) the moment a cold-load skeleton appears. It replaces four identical inline effects (the guard, the orchestrator,MoneyRequestReportView, andMoneyRequestReportActionsList).ReportScreennow mounts<ReportActions/>instead of the old wrapper.MoneyRequestReportViewmounts the body (ReportActionsList) directly and mountsUserTypingEventListeneritself. It does not route through the orchestrator on purpose, because its money-request branching stays where it is, per the blueprint.ReportActionsView.tsx, the old 58-lineinbox/ReportActionsList.tsxwrapper, andgetReportActionsListInitialNumToRender.ts(and its test).Unit Tests
tests/ui/ReportActionsTest.tsx: orchestrator tests for the skeleton states, the choice between the money-request table and the chat list, the typing mount, and the app-loadwarm: falsetelemetry.tests/ui/ReportActionsListTest.tsx: body tests for concierge and fine-grained skeleton behavior. It mounts the body directly with a seeded Onyx store.tests/ui/MoneyRequestReportViewTest.tsx: the second consumer. It mounts the body and the typing listener on the chat path, and the table view on the money-request path.tests/perf-test/ReportActionsList.perf-test.tsx: rewritten against the new body surface (see below).Perf: not a like-for-like regression
The render count increased from 3 to 5 and it has a concrete explanation.
With static props the component rendered straight through in ~3 passes.
With only
reportID, it subscribes to manyuseOnyxkeys that resolve asynchronously after mount, that settles triggers a re-renders.Instability fixed along the way. While reviewing the relocated pipeline I found a real instability:
useReportActionsVisibilitybuilt its{[reportID]: slice}lookup as an inline computed-key object literal. The React Compiler refuses to memoize a dynamically-keyed object, and pruned memoization of the visible-actions filter that depends on it, sosortedVisibleReportActionsgot a fresh reference every render. That unstable array flowed into the list context value, re-rendering the list body on every settling subscription. Moving the wrap intoreportVisibleActionsSelector(a plain selectoruseOnyxhands back stably) removed the computed-key literal and let the compiler memoize the filter again. This was a pre-existing instability (on main the same array was passed as an unstable prop intomemo(ReportActionsList)), not something the decomposition introduced. It also resolves the review note about thestate/actionscontext values repaintingReportActionsListContenton guard-only re-renders:actionswas already referentially stable and the compiler already memoizesstate; this one field was the only churn. Verified byuseReportActionsListModelStability.test.tsx(state and actions keep the same reference across a guard re-render with unchanged data).Fixed Issues
$ #89767
PROPOSAL:
Tests
Test 1: Open a regular chat
Test 2: Deep-link to an old message
Test 3: Open an expense report with multiple transactions
MoneyRequestReportActionsList), not the chat list.Test 4: Open an expense report that renders chat-style
Test 5: Open a single expense / transaction-thread report
Test 6: Typing indicator in a 1:1 chat
Test 7: Typing indicator in a transaction-thread report
Test 8: Open the Concierge DM
Test 9: Open an unread report
Test 10: Scroll up to load older messages, then back down
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
andoird.native.mov
Android: mWeb Chrome
android.chrome.mov
iOS: Native
ios.native.mov
iOS: mWeb Safari
ios.safari.mov
MacOS: Chrome / Safari
web1.mov
web2.mov