Skip to content

[6.x] Only render Bard toolbar buttons when they're needed - #15768

Merged
duncanmcclean merged 3 commits into
6.xfrom
lazy-bard-toolbars
Nov 2, 2026
Merged

duncanmcclean merged 3 commits into
6.xfrom
lazy-bard-toolbars

Conversation

@duncanmcclean

@duncanmcclean duncanmcclean commented Nov 2, 2026 •

Copy link
Copy Markdown
Member

This pull request improves performance on entries with lots of Bard fields by only rendering an editor's toolbar buttons once it's within 500px of being scrolled into view. Bard fields inside collapsed sets, collapsed sections or other tabs get their buttons once they're shown.

Only the buttons are deferred — the editors themselves (and the sets they live in) still mount straight away, so nothing changes about how values are handled.

The IntersectionObserver uses the Control Panel's scroll region as its root, since that's what actually scrolls. Otherwise, the 500px margin wouldn't apply and toolbars would only render once they were already on screen.

On an entry with 43 Bard fields (~1,400 toolbar buttons), this took the time until every editor had loaded from ~4.3s to ~3.6s.

Related: #13385

@duncanmcclean
duncanmcclean marked this pull request as draft November 2, 2026 14:17
# Conflicts:
#	resources/js/components/fieldtypes/bard/BardFieldtype.vue
#	resources/js/tests/components/fieldtypes/bard/BardFieldtype.test.js
@duncanmcclean
duncanmcclean marked this pull request as ready for review November 2, 2026 18:05
@duncanmcclean
duncanmcclean merged commit 7582696 into 6.x Nov 2, 2026
65 checks passed
@duncanmcclean
duncanmcclean deleted the lazy-bard-toolbars branch November 2, 2026 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant