perf: lazy-mount FAB menu items only when popover is visible#45
Closed
leshniak wants to merge 3 commits into
Closed
perf: lazy-mount FAB menu items only when popover is visible#45leshniak wants to merge 3 commits into
leshniak wants to merge 3 commits into
Conversation
Menu item children (9 components with ~46 Onyx subscriptions total) were always mounted even when the popover was closed. Now they mount only when the menu opens, eliminating idle subscription cost on the main screen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Keep children mounted during the close animation by deferring unmount to onModalHide instead of gating on isVisible directly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposal: Eliminate idle CPU overhead from the FAB popover menu
Strategy: Expensify's chat-first mobile experience depends on the inbox feeling instantly responsive. The sidebar — always visible, always processing real-time events — is the backbone of that experience. Reducing wasted work in always-mounted sidebar components directly improves the responsiveness that retains paying customers.
Background: The Floating Action Button (FAB) in the sidebar lets users create expenses, reports, chats, invoices, and other items via a popover menu. A recent architectural refactor decomposed the original monolithic FAB into 9 self-subscribing menu item components, each owning its data through Onyx subscriptions. This improved code maintainability and established clear component boundaries. The FAB is part of the sidebar, which is always mounted on the inbox screen. The popover menu itself is ephemeral — users open it briefly to initiate an action, then it closes immediately.
Problem: When the FAB popover is closed, all 9 menu item components remain permanently mounted and actively processing real-time data updates, so every Pusher event touching reports, policies, or transactions burns JS thread time on invisible components while the user is reading their inbox.
Solution: Defer mounting the 9 menu item children until the popover actually opens, and unmount them when it closes. This is a single-line conditional render gate in FABPopoverMenu — the menu items and their Onyx subscriptions simply don't exist while the popover is closed, eliminating all idle processing cost.
CPU time measured with
process.cpuUsage()during 50 sequential report updates (3 stable runs per branch, 500 seeded reports):The savings scale linearly with real-time event frequency. On active accounts receiving frequent Pusher updates, this eliminates ~17ms of wasted CPU per update batch from an always-visible sidebar component.
🤖 Generated with Claude Code