Perf/workspaces list page composition#93293
Conversation
|
Codex Review: Didn't find any major issues. More of your lovely PRs please. ℹ️ 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". |
| const [canDowngrade] = useOnyx(ONYXKEYS.ACCOUNT, {selector: canDowngradeSelector}); | ||
| const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); | ||
| const [isLoadingBill] = useOnyx(ONYXKEYS.IS_LOADING_BILL_WHEN_DOWNGRADE); | ||
| const [ownedPaidPoliciesCounts] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createOwnedPaidPoliciesCountsSelector(session?.accountID)}, [session?.accountID]); |
There was a problem hiding this comment.
CreateOwnedPaidPoliciesCountsSelector returns a global value ({total, active}) that's identical for every row and doesn't depend on item. Subscribing to it per-row means we run getOwnedPaidPolicies over the whole collection once per visible row, on every write to any policy (e.g. the isLoading* flips from Test 3). We're effectively re-introducing the same work this PR removes at the page level, just multiplied by the number of rows.
I'd suggest hoisting this selector up to WorkspacesListPage and passing the result down as a prop — the same way we already do with copySettingsEligibleTargets. That gives us a single O(N) pass per write instead of O(visible × N), and since the output is stable (only changes on add/remove/pending-delete) it won't trigger any extra page re-renders. It also keeps the pattern consistent with the other page-level selectors in this PR.
| const [, amountOwedResult] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); | ||
| const [ownedPaidPoliciesCounts, ownedPaidPoliciesCountsResult] = useOnyx( | ||
| ONYXKEYS.COLLECTION.POLICY, | ||
| {selector: createOwnedPaidPoliciesCountsSelector(currentUserPersonalDetails.accountID)}, |
There was a problem hiding this comment.
We already have const [policies, policiesResult] = useOnyx(ONYXKEYS.COLLECTION.POLICY);, so maybe we can reuse that instead of creating a second subscription.
| const {translate, localeCompare} = useLocalize(); | ||
| const {isOffline} = useNetwork(); | ||
| const isFocused = useIsFocused(); | ||
| const currentUserPersonalDetails = useCurrentUserPersonalDetails(); |
There was a problem hiding this comment.
The other new components (WorkspaceRowThreeDotsMenu, LeaveWorkspaceAction, TransferOwnershipAction) read the current user from session. Could we use session?.accountID here too, to avoid mixing two sources of the user identity within the same feature?
TMisiukiewicz
left a comment
There was a problem hiding this comment.
this looks great 💪
Explanation of Change
WorkspacesListPagestays mounted in the background (e.g. after navigating into a workspace) and used to commit on every write to any policy (including optimisticisLoading*flips such asopenPolicyWorkflowsPage), any report (via a rawCOLLECTION.REPORTsubscription held for the delete flow), and any personal details change. Every page commit also rebuilt the menu items and closures for all rows inline, re-rendering every row. This PR decomposes the page so that each piece of logic subscribes only to the data it needs, only for as long as it needs it:1. Delete flow →
DeleteWorkspaceFlow(mounted only while a deletion is in progress)All delete-related subscriptions that previously lived on the page permanently — the raw
COLLECTION.POLICY, the rawCOLLECTION.REPORTviauseTransactionViolationOfWorkspace(the single biggest source of background re-renders), card feeds, cards list, last-selected feeds, reimbursement account errors, last payment methods, subscription/account/amount-owed keys — now exist only whilepolicyIDToDeleteis set. The component orchestrates the Invoicify block, the outstanding-balance guard, bill calculation for the last paid workspace, the confirmation modal and the offline error modal, and unmounts itself when the flow finishes.2. Row three-dots menu →
WorkspaceRowThreeDotsMenu(per row)The ~140-line
getThreeDotMenuItemspreviously built on the page for every row moved into a per-row component that builds its items from cheap, mostly primitive-valued subscriptions:SESSION,NVP_ACTIVE_POLICY_ID,FUND_LIST→ boolean,ACCOUNT→canDowngrade,NVP_PRIVATE_AMOUNT_OWED,IS_LOADING_BILL_WHEN_DOWNGRADE, and an owned-paid-policies-counts selector. The hide-popover-when-bill-loading-ends effect moved here fromWorkspaceTableRow.3. Leave / transfer ownership →
LeaveWorkspaceAction/TransferOwnershipAction(mounted on click)Both flows need the full policy entry (
connectionsfor exporters,technicalContact,achAccount.reimburser,errorFields.changeOwner), so they subscribe toPOLICY${id}only for the lifetime of the action and unmount when it completes. At rest the rows hold no full-policy subscriptions, soisLoading*flips no longer re-render them.4. Error indicator →
WorkspaceRowBrickRoadIndicator(per row)The page-level brick-road computation required the raw
COLLECTION.POLICY, the wholePOLICY_CONNECTION_SYNC_PROGRESScollection, the rawREIMBURSEMENT_ACCOUNTandusePoliciesWithCardFeedErrors(a second rawCOLLECTION.POLICYsubscription). It is replaced by four narrow per-row subscriptions (useWorkspaceAccountID,DERIVED.CARD_FEED_ERRORS→ boolean,REIMBURSEMENT_ACCOUNT→ boolean,POLICY_CONNECTION_SYNC_PROGRESS${id}+POLICY${id}→ boolean). A change to a deep policy field now re-renders at most one row's indicator instead of committing the whole page.5. Page subscriptions → narrow selectors
COLLECTION.POLICY→createWorkspaceListPoliciesSelector: a flat ~11-field projection per policy (id, name, type, role, ownerAccountID, avatarURL, pendingAction, errors, isPendingDelete, isJoinRequestPending, nonMemberDetails) with theshouldShowPolicyfilter inside the selector, so itsdeepEqualis blind toisLoading*/employeeList/connectionsand cheap to compare.usePersonalDetails()(full context) →createDisplayDetailsByAccountIDsSelectorlimited to the owner account IDs shown in the list.createCopySettingsEligibleTargetsSelectorreturning two ID arrays, evaluated once per policy write at the page level and passed down to the row menus (avoids O(N²) per-row evaluation).isUserReimburserForPolicychanged from a collection-based to a per-policy signature and moved next to its only consumer (LeaveWorkspaceAction).Result: background writes — report changes,
isLoading*flips, deep policy field mutations, unrelated personal details updates — no longer commitWorkspacesListPageat all. Genuine row-data changes (name, avatar, role, errors, pending actions) still re-render the page as expected, and deep-field errors commit only the affected row's indicator.Fixed Issues
$
PROPOSAL:
Tests
Test 1: Three-dots menu, leave and transfer flows
Test 2: Delete workspace from the row menu
Test 3: Per-row error indicator and no background re-renders
isLoadingflag)WorkspacesListPagedoes not commit in the profiler trace while in the backgroundOffline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand 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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari