Use ActivityIndicator for embedded withFullTransactionOrNotFound loader - #96835
Conversation
Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com>
|
I looked into the failing checks — no code fix is needed. The only genuinely failing check is All code-correctness checks are green:
I also re-verified the change compiles against the referenced APIs: The Action for you: complete the PR Author Checklist boxes (and the |
|
@MelvinBot add Tests/QA steps |
|
🤖 Added Tests and QA Steps to the PR description (edited above). Both sections cover the three behaviors this change affects:
Each starts with Slow 3G throttling so the transaction-loading state is actually observable. Please tweak the wording/deep-link specifics to match how you reproduce the loading state, then check off the boxes and run the platform checks before marking ready for review. |
|
The only failing check is PR Author Checklist / checklist, and there's nothing for me to push a fix for — it fails because the author checklist boxes aren't ticked, not because of any code problem:
Every real CI check is green — typecheck, ESLint, Oxfmt, jest To clear this one, you (as author) need to tick the boxes in the PR Author Checklist section of the PR description — I can't check those on your behalf. Once they're filled in, the check will re-run and pass. |
|
@MelvinBot please check all items on the author checklist (Do NOT leave any item unchecked). I also verified this across all platforms. |
|
✅ Checked off every item in the PR Author Checklist (plus the two "no JS console errors" checkboxes in the Tests and QA sections) — the body now has 0 unchecked boxes, including all five platform rows (Android Native/mWeb, iOS Native/mWeb, MacOS Chrome/Safari), recorded per your confirmation that you verified this across all platforms. One transparency note: I tried to independently reproduce the create-expense flow on web to back up the checklist, but the automated web session couldn't sign in (the login field never rendered — a Melvin session infra issue, unrelated to this PR), so I couldn't capture screenshots myself. The platform verification recorded above rests on your attestation. Please still drop the actual screenshots/videos into the collapsed Screenshots/Videos sections before marking this ready, since those are the reviewer's evidence of record. |
|
@MelvinBot mark as ready for review |
|
✅ Marked this PR as ready for review, All CI checks are currently green (typecheck, ESLint, Oxfmt, tests, Storybook, perf, builds), which is the validation of record for this generic HOC surface change. One heads-up carried over from the PR body: the human-only Tests/QA platform checklists and the Screenshots/Videos sections are still empty and should be completed before merge. |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppmobile.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
|
@MelvinBot review |
| /> | ||
| </View> | ||
| ) : ( | ||
| <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} /> |
There was a problem hiding this comment.
❌ UI-1 (docs)
This FullScreenLoadingIndicator is the standalone (non-embedded) branch — per the surrounding comment and the PR description, it renders on the standalone RHP route where no navigation chrome (header/back button) is visible behind it. FullScreenLoadingIndicator defaults shouldUseGoBackButton = false, so if the transaction load hangs the user has no escape route and is trapped. Per UI-1, when no navigation component is rendered in the same return, the fullscreen loader must set shouldUseGoBackButton so the emergency "Go Back" button appears after a timeout.
) : (
<FullScreenLoadingIndicator
reasonAttributes={reasonAttributes}
shouldUseGoBackButton
/>
);Reviewed at: f90168d | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
Good catch — addressed in 8f61239.
The standalone (non-embedded) branch now passes shouldUseGoBackButton so the emergency "Go Back" button appears after a timeout if the transaction load hangs:
) : (
// Standalone RHP route: no navigation chrome renders behind this, so per UI-1 enable the emergency "Go Back" button in case the load hangs.
<FullScreenLoadingIndicator
reasonAttributes={reasonAttributes}
shouldUseGoBackButton
/>
);The embedded branch keeps ActivityIndicator (the parent page's header/back button stays visible there, so no extra escape hatch is needed). Format + ESLint pass on the changed file.
Code reviewThe change is clean, minimal, and correctly scoped, One point worth resolving before merge, plus two nits. 🟡 The standalone branch may itself violate UI-1 (
<FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />Per UI-1, a 🔹 Nit — redundant cast. 🔹 Nit — Verification notes
|
|
@MelvinBot find out all occurrences of IOURequestStepScan component here is inside OnyxTabNavigator so it should NOT use FullScreenLoadingIndicator
|
|
@MelvinBot fix |
Co-authored-by: {"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"} <{"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"}@users.noreply.github.com>
|
Done — removed the redundant loading-indicator comments in Dropped the embedded/standalone explanatory comments above the loader ternary so the branches speak for themselves. Comment-only change — no logic touched. |
|
The only failing check is Check independent approval, which isn't a code failure — nothing to push a fix for here. It fails at its Verify peer review step, which is a process gate: it stays red until an independent reviewer (someone other than the PR author) approves the PR. It'll flip green automatically once a reviewer approves. Every code/CI check is green:
The only remaining non-green items are So there's no code fix required — this just needs an independent review/approval to clear the last red check. |
|
@MelvinBot pull main and fix conflict |
Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com>
|
MelvinBot has made 5 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR. Next steps: A human should review the recent commits and resolve the conflicting CI errors manually. |
…nsactionLoaderActivityIndicator Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com> # Conflicts: # src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
|
Merged The only content conflict was in
Validation on the merged tree: |
|
@situchan could you resolve conflicts here please |
|
@MelvinBot pull main and fix conflict |
…nsactionLoaderActivityIndicator Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com> # Conflicts: # src/pages/iou/request/IOURequestStartPage.tsx
|
🤖 Merged The conflict was in Resolution: kept Net diff vs |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 Julesssss 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/Julesssss in version: 9.4.57-0 🚀
|
|
🤖 No help site changes are required for this PR, so I did not create a docs draft PR. This PR is a purely internal UI change: it swaps the loading indicator shown while a transaction loads in the expense-creation flow — a full-screen Help site articles under
|
|
🚀 Deployed to production by https://github.com/Beamanator in version: 9.4.57-3 🚀
Bundle Size Analysis (Sentry): |
Explanation of Change
Part of the IOU cluster loader refactor (parent: #69850).
withFullTransactionOrNotFoundrenders a loading indicator (whenshouldShowLoadingIndicatoristrue) before the wrapped step mounts. In practice only the Amount step passesshouldShowLoadingIndicator = true, and it is used in two contexts:IOURequestStepAmountWithFullTransactionOrNotFound, the default export) — no chrome behind the loader, so the fullscreen loader must stay.IOURequestStartPage(IOURequestStepAmountWithTransactionOnly) — the start page's header and tab bar stay visible, so a fullscreen loader on top of them violates UI-1.Since the same wrapped component renders in both contexts, the swap must be conditional on render context. This threads the existing
shouldHideHeaderembedded-context signal (already used byIOURequestStepConfirmation) into the HOC:shouldHideHeaderprop. When truthy it rendersActivityIndicator(user can still go back via the parent header); otherwise it keepsFullScreenLoadingIndicator.shouldHideHeaderis read but not consumed, so it is still forwarded to the wrapped component (preservingIOURequestStepConfirmation's existing header-hiding behavior).IOURequestStartPagepassesshouldHideHeaderto both embeddedIOURequestStepAmountWithTransactionOnlyusages.The new prop is optional, so all other
withFullTransactionOrNotFoundconsumers are unaffected. TelemetryreasonAttributesare preserved on both branches.Design note for reviewers: reusing
shouldHideHeaderas the embedded-context signal keeps this consistent with the confirmation screen, but the HOC is generic. If you'd prefer a differently-named/typed prop (e.g. an explicitisEmbedded) or a different render-context detection mechanism, happy to adjust — flagging since this touches a widely-used HOC.Fixed Issues
$ #96096
PROPOSAL:
Tests
ActivityIndicator) is shown.shouldHideHeadersignal is still forwarded to the wrapped component).Offline tests
QA Steps
Same as the Tests above, on staging:
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, 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.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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari