Description
Add lazy-mount options where appropriate for components that render non-visible content eagerly.
This should be limited to components where deferred mounting can reduce initial render cost without breaking expected behavior, accessibility, or composition patterns.
Examples
Potential candidates:
-
Tabs.Content
Only mount the active panel instead of rendering every panel up front when there are many tabs or heavy panel contents.
-
Accordion.Content
Delay mounting collapsed content until a section is opened, especially when panels contain expensive trees.
-
Dialog, Popover, or DropdownMenu content
Avoid mounting overlay content before the overlay is opened if that content is not needed for initial render.
-
Tooltip / HoverCard
Defer rendering floating content until interaction happens instead of mounting all hidden overlays eagerly.
-
large composed lists inside overlays
If a menu or popover contains a heavy subtree, lazy mounting can avoid paying that cost before the user opens it.
Acceptance Criteria
- Appropriate components are reviewed for lazy-mount support.
- Lazy-mount options are added only where behavior remains predictable and accessible.
- Tests cover mount/unmount behavior and any affected lifecycle expectations.
- Docs/storybook are updated for any new API or behavior.
- Add a changeset only if there is user-facing impact.
Description
Add lazy-mount options where appropriate for components that render non-visible content eagerly.
This should be limited to components where deferred mounting can reduce initial render cost without breaking expected behavior, accessibility, or composition patterns.
Examples
Potential candidates:
Tabs.ContentOnly mount the active panel instead of rendering every panel up front when there are many tabs or heavy panel contents.
Accordion.ContentDelay mounting collapsed content until a section is opened, especially when panels contain expensive trees.
Dialog,Popover, orDropdownMenucontentAvoid mounting overlay content before the overlay is opened if that content is not needed for initial render.
Tooltip/HoverCardDefer rendering floating content until interaction happens instead of mounting all hidden overlays eagerly.
large composed lists inside overlays
If a menu or popover contains a heavy subtree, lazy mounting can avoid paying that cost before the user opens it.
Acceptance Criteria