[WIP] [HOLD on #100884] [LegendList 4/7] feat: migrate report actions to chronological LegendList

[chrispader]

The report-actions list currently uses inversion, so rendering order and scroll coordinates differ from chronological message order. This PR moves the main chat list to LegendList and updates pagination, unread tracking, message editing, recycling, and initial loading behavior to work with chronological data.

@roryabraham @dmkt9

@Expensify/design Please review the initial chat-loading skeleton shown below.

Explanation of Change

This is layer 4 of the seven-part LegendList and chat pagination stack. It migrates ReportActionsList to chronological LegendList data through a direct {LegendList} import from @legendapp/list/react-native, updates the shared action-list ref contract, preserves cached pages during hydration, and includes the Android anchor patch. It also covers pagination thresholds, targeted scrolling, unread tracking, live-tail updates, badge targets, message editing, and recycled rows. Other FlashList consumers remain unchanged, and layer 5 adds the separate loading indicators and pagination-scroll behavior.

Initial loading now uses one shared, bottom-padded skeleton cover across the Inbox and Search expense-report entry paths. The cover remains visible while the initial request is pending and until the current LegendList viewport reports that it loaded. LegendList also keeps newly assigned rows hidden until native measurement finishes, which prevents estimated off-screen rows such as the chat start message from briefly overlapping visible content. A terminal initial-load failure can clear the cover instead of leaving it stuck.

The review follow-up restores onStartReached so short chats can load older pages before the viewport becomes scrollable, names the comment-size recycling thresholds, and keeps newest-message edits in large money reports on the list's indexed bottom-scroll path. The Reassure scenario now has a LegendList-specific name because the LegendList Jest mock eagerly renders its supplied data while the previous FlashList harness used virtualization; this establishes a renderer-specific baseline instead of comparing incompatible test harnesses. Layer 1 is now merged, and this branch includes its final edge-callback latch changes plus the latest main.

The list-aware message-edit scrolling and shared loading-skeleton cover remain in this branch for now, but are being extracted into #100883 and #100884. Once those PRs merge, merging main here will remove those duplicated changes from this PR's effective diff.

Review order: 1. Foundation → 2. Message edit scrolling → 3. Loading skeleton consistency → 4. Report actions → 5. Chat pagination loading → 6. Remaining FlashList consumers → 7. Remaining FlatList consumers and restrictions. Review and merge the layers in this order.

Fixed Issues

$ #98994
$ #99202

This PR is part of the migration split from #98270. No approved proposal is linked.

Tests

1. Sign in with a high-traffic account and open a chat with enough history to paginate in both directions. Test both a cold open and a warm open, including an expense chat. Verify there is one consistently positioned loading skeleton with bottom padding before the content appears.
2. Scroll through older and newer pages. Verify messages remain in chronological order, consecutive actions stay grouped, and loading a page does not move the visible message.
3. Open links to older, newest, and unread messages, including a target at the beginning of the loaded data. Verify the target appears in the correct position, the unread marker stays with the correct message, and the chat start message never overlaps visible content while the list is measuring.
4. Stay at the bottom while another account sends a message. Verify the list follows the new message.
5. Scroll up into history while another account sends a message. Verify the list keeps the current reading position instead of jumping to the new message.
6. Edit recent and older messages, and receive a streamed Concierge response. Verify edits and streamed text stay attached to the correct message.
7. Send messages containing URLs, single-line code, code blocks, quotes, headings, bold, strikethrough, and italic text. Verify every format renders correctly before and after scrolling the row off-screen and back.
8. Scroll repeatedly through text, image, and PDF rows. Verify recycled rows do not carry content, selection, preview, or loading state into another message.
9. Open a direct chat link while signed in, then open the same link while signed out and sign in. Verify the requested chat opens and scrolling works in both flows.
10. Open a short chat whose loaded actions do not fill the viewport but which has older history. Verify older pages load until the viewport can scroll or the oldest action is reached.
11. Open a large money report, edit its newest message, and save or cancel the edit. Verify the list returns to the newest action without landing on blank estimated space.
12. Cause the initial report request to fail, then retry it. Verify the loading cover clears after the terminal failure and the report can load normally after the retry.

• Verify that no errors appear in the JS console

Offline tests

1. Open a chat online so its history is cached, disconnect the network, and reopen the chat. Verify the cached messages remain visible in chronological order and existing message grouping is unchanged.
2. While offline, scroll to an unloaded edge of the cached history. Verify the visible messages stay in place and the list does not enter a broken or empty state.
3. Reconnect while history is loading. Verify the cached page remains visible until hydration completes, the missing page loads, and the visible message does not jump.
4. Disconnect during pagination, reconnect, and retry by scrolling to the same edge. Verify pagination recovers and the requested messages appear once without duplicates.

QA Steps

Same as Tests and Offline tests.

• Verify that no errors appear in the JS console

PR Author Checklist

I reviewed every item for this PR. A checked conditional item means I verified it or determined that it does not apply. I attached the available native evidence below; Android screen recordings are still TBD, and web recordings are deferred. The checked recordings item records that review and the available evidence, not that every platform has a video.

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

iOS: Native

Cold chat open and initial loading

FlashList is on the left and LegendList is on the right. FlashList leaves the report body blank during loading; LegendList shows the report-action skeleton before messages appear.

LegendListLoadingSkeletonVsFlashList.mp4

Cold expense-chat open

FlashList is on the left and LegendList is on the right. Both progress from the loading skeleton to an expense preview and its surrounding report actions.

ExpenseChatCold.mp4

Warm expense-chat open

FlashList is on the left and LegendList is on the right. Both open the cached expense preview and report actions from the inbox.

ExpenseChatWarm.mp4

Warm chat open

Side-by-side opens of the same cached chat, ending on the same report-action history. The implementations are not labeled in this recording.

LegendListWarmReportOpen.mp4

Android: Native

Cold chat open and initial loading

FlashList is on the left and LegendList is on the right. FlashList leaves the report body blank during loading; LegendList shows the report-action skeleton before messages appear.

ColdOpenLoading.mp4

Cold expense-chat open

FlashList is on the left and LegendList is on the right. Both progress from the loading skeleton to an expense preview and its surrounding report actions.

Android screen recording TBD.

Warm expense-chat open

FlashList is on the left and LegendList is on the right. Both open the cached expense preview and report actions from the inbox.

Android screen recording TBD.

Warm chat open

Side-by-side opens of the same cached chat, ending on the same report-action history. The implementations are not labeled in this recording.

Android screen recording TBD.

Web recordings are deferred.

[melvin-bot]

@TaduJR 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]

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-10T10:07:15.590070Z	f616302	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[codecov]

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.

Files with missing lines	Coverage Δ
src/components/FlatList/FlatList/index.ios.tsx	90.47% <100.00%> (ø)
...equestReportView/MoneyRequestReportActionsList.tsx	66.03% <100.00%> (+5.46%)	⬆️
.../MoneyRequestReportView/MoneyRequestReportView.tsx	74.46% <100.00%> (+15.32%)	⬆️
src/components/ReportActionsSkeletonCover.tsx	100.00% <100.00%> (ø)
src/hooks/useReportActionsListModel.ts	100.00% <100.00%> (ø)
src/hooks/useReportActionsScroll.ts	97.61% <100.00%> (-0.75%)	⬇️
src/hooks/useReportScrollManager/index.native.ts	90.47% <ø> (ø)
src/hooks/useReportScrollManager/index.ts	0.00% <ø> (ø)
src/pages/inbox/ActionListContext.tsx	94.44% <100.00%> (-5.56%)	⬇️
...c/pages/inbox/report/MoneyReportContentCreated.tsx	100.00% <100.00%> (ø)
... and 19 more
... and 97 files with indirect coverage changes

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f616302cdb

ℹ️ About Codex in GitHub

Your team has set up Codex to 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 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[github-actions]

⚠️ This PR is possibly changing native code and/or updating libraries, it may cause problems with HybridApp. Please check if any patch updates are required in the HybridApp repo and run an AdHoc build to verify that HybridApp will not break. Ask Contributor Plus for help if you are not sure how to handle this. ⚠️

[chrispader]

Last TO-DOs for me on this one: Add the remaining screen recordings/comparison videos for Android and Web.

@roryabraham feel free to review and assign a C+ already!

[roryabraham]

Sorry, I don't have time for a very thorough review today, but I'll give a few quick comments.

Also, please check if any of the components you modified were not compiling with React Compiler on main but are compiling on this branch. If so, let's see if we can remove manual memoization from them an simplify.

[chrispader]

Thanks for the quick review @roryabraham. I'm going to address this in a bit. I'm also going to extract some more logic into two separate PRs, things related to...

• Message-edit scrolling fix for inverted and non-inverted lists and
• Loading-skeleton consistency across chat types

[roryabraham]

reindex the x/5 PR sequence accordingly, please. Or if some can be reviewed in parallel, create a mermaid flowchart for the rollout.

[chrispader]

The list-aware message-edit scrolling fix and the generic report-actions loading-skeleton consistency work are being extracted into #100883 and #100884. Their code remains in this branch for now so the current review state stays intact. Once both extraction PRs merge, I will merge main here and let those changes drop out of this PR’s effective diff.

Answered by Codex, instructed by Chris.