[Due for payment 2025-08-15] [$250] Avoid rendering PopoverMenus before they are opened

[mountiny]

Coming from here

Background:

PopoverMenu is a component that displays a popover on wide layout and a bottom sheet on narrow screens.

Problem:

Popovers are rendered with their parents, even if they are not visible. It means that on some screens there might be 10+ PopoverMenus with some complex MenuItems in the DOM tree, even though they are not displayed even once

Solution:

Write a wrapper for PopoverMenu that controls if the component should be rendered.

Rendering the Workspaces tab (with 12 PopoverMenus)

• Before: 887 ms
• After: 442 ms (-50%)

Rendering the Reports tab with multiple reports (with 4 PopoverMenus)

• Before: 1761 ms
• After: 1608 ms (-9%)

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021952688737946794120
• Upwork Job ID: 1952688737946794120
• Last Price Increase: 2025-08-05

Issue Owner

Current Issue Owner: @dylanexpensify

Issue Owner

Current Issue Owner: @staszekscp

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021952688737946794120

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dukenv0307 (External)