[Dashboard] Improve perceived performance of dashboard flyouts#226052
Merged
mbondyra merged 53 commits intoelastic:mainfrom Jul 15, 2025
Merged
[Dashboard] Improve perceived performance of dashboard flyouts#226052mbondyra merged 53 commits intoelastic:mainfrom
mbondyra merged 53 commits intoelastic:mainfrom
Conversation
mbondyra
force-pushed
the
dashboard_flyout_lazy_temp
branch
6 times, most recently
from
1a0a71b to
b989c6d
Compare
mbondyra
force-pushed
the
dashboard_flyout_lazy_temp
branch
from
724afa1 to
9e8aa04
Compare
mbondyra
changed the title
mbondyra
force-pushed
the
dashboard_flyout_lazy_temp
branch
5 times, most recently
from
ab86e7c to
5b7ff59
Compare
mbondyra
added
v9.1.0
release_note:enhancement
Team:Presentation
Contributor
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
mbondyra
force-pushed
the
dashboard_flyout_lazy_temp
branch
from
bac049f to
94a2aae
Compare
Dosant
approved these changes
Jul 11, 2025
Contributor
Dosant
left a comment
Dosant
left a comment
There was a problem hiding this comment.
I smoked checked image panel 👍
...ctions_ui/public/common/alert_rule_from_vis_ui_action/alert_rule_from_vis_ui_action.test.tsx
Outdated
Show resolved
Hide resolved
src/platform/packages/shared/presentation/presentation_util/src/open_lazy_flyout.tsx
Show resolved
Hide resolved
nreese
approved these changes
Jul 11, 2025
Contributor
nreese
left a comment
nreese
left a comment
There was a problem hiding this comment.
kibana-presentation changes LGTM. Thank you for taking on this effort. Its great to see a consolidation of dashboard flyouts logic
code review and tested in chrome
umbopepato
reviewed
Jul 11, 2025
Member
There was a problem hiding this comment.
Thanks @mbondyra for addressing the flyout config issue so quickly! 💯
I noticed that the new flyout squeezes the rule-from-viz creation form a bit too much and makes things harder to read. Would it be possible to make the flyout size configurable to accoun for these larger UIs that need a bit more screen estate?
x-pack/platform/plugins/shared/embeddable_alerts_table/public/components/open_config_editor.tsx
Outdated
Show resolved
Hide resolved
This was referenced Jul 12, 2025
…d_flyout_lazy_temp # Conflicts: # x-pack/platform/plugins/shared/dashboard_enhanced/public/plugin.ts
mbondyra
added a commit
that referenced
this pull request
Jul 14, 2025
# Summary Hi Operations team! 👋 Recently I've worked on a [few](#227593) [PRs](#226052) that reduce our page load bundle size, and while doing so I noticed that many of our limits are much higher than the actual page load sizes. It made me think: these limits should be realistic, because they’re one of the main ways we protect page load performance. Right now, based on the current limits, we theoretically allow up to 11,452,104 bytes (~11 MB) to load upfront. But when we check the real page load, it’s only 5.192.979 bytes — about half of that. We already have a `--update-limits` flag for the `node scripts/build_kibana_platform_plugins.js --update-limits` command, but it only bumps limits up when the size grows above the limit, adding a flat 15 KB buffer to the bundle size. I’d like to propose: 1. Allowing the `--update-limits` to allow folks to also lower limits when the bundle shrinks drastically 2. Replacing the flat 15 KB buffer with 10% of the plugin’s size, so the buffer scales realistically. Right now, with ~197 plugins, `--update-limits` allows for an extra (15KB*197=) 3 MB above the total page size — which is way too much in my opinion! ## What’s in this PR ✅ Adds logic to let us lower limits automatically, not just bump them up with `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Replaces the flat +15 KB bump with a 10% buffer relative to each plugin’s size when using `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Updated the limits.yml with the result from the above script ## Why it matters 1. Keeps bundle sizes tight 2. Protects us from accidental regressions
…d_flyout_lazy_temp
…d_flyout_lazy_temp # Conflicts: # packages/kbn-optimizer/limits.yml
nickofthyme
approved these changes
Jul 14, 2025
Contributor
nickofthyme
left a comment
nickofthyme
left a comment
There was a problem hiding this comment.
Code looks good, tested locally and works perfect! 🎉
umbopepato
approved these changes
Jul 15, 2025
Member
umbopepato
left a comment
umbopepato
left a comment
There was a problem hiding this comment.
LGTM! Thanks @mbondyra for fixing the alerts panel issues 😊
Added a small nit suggestion
...ck/platform/plugins/shared/embeddable_alerts_table/public/actions/add_alerts_table_action.ts
Outdated
Show resolved
Hide resolved
mbondyra
force-pushed
the
dashboard_flyout_lazy_temp
branch
from
77ecbc7 to
b30f6d8
Compare
Contributor
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
Page load bundle
Unknown metric groupsAPI count
async chunk count
References to deprecated APIs
History
|
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
# Summary Hi Operations team! 👋 Recently I've worked on a [few](elastic#227593) [PRs](elastic#226052) that reduce our page load bundle size, and while doing so I noticed that many of our limits are much higher than the actual page load sizes. It made me think: these limits should be realistic, because they’re one of the main ways we protect page load performance. Right now, based on the current limits, we theoretically allow up to 11,452,104 bytes (~11 MB) to load upfront. But when we check the real page load, it’s only 5.192.979 bytes — about half of that. We already have a `--update-limits` flag for the `node scripts/build_kibana_platform_plugins.js --update-limits` command, but it only bumps limits up when the size grows above the limit, adding a flat 15 KB buffer to the bundle size. I’d like to propose: 1. Allowing the `--update-limits` to allow folks to also lower limits when the bundle shrinks drastically 2. Replacing the flat 15 KB buffer with 10% of the plugin’s size, so the buffer scales realistically. Right now, with ~197 plugins, `--update-limits` allows for an extra (15KB*197=) 3 MB above the total page size — which is way too much in my opinion! ## What’s in this PR ✅ Adds logic to let us lower limits automatically, not just bump them up with `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Replaces the flat +15 KB bump with a 10% buffer relative to each plugin’s size when using `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Updated the limits.yml with the result from the above script ## Why it matters 1. Keeps bundle sizes tight 2. Protects us from accidental regressions
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
…ic#226052) ## ✨ Summary This PR introduces a new `openLazyFlyout` helper to improve the **perceived performance** and **accessibility** of dashboard flyouts by changing the interaction flow. The flow is applied for the majority of the dashboard flyouts, but not all. The remaining work is encapsulated in this issue: elastic#227446 ### 🧠 Previous pattern 1. User clicks a button 2. Setup logic runs (dependencies, content load) 3. Flyout opens once ready ) ### ✅ New pattern 1. User clicks a button 2. Show a loading flyout **immediately** 3. Load the actual content **asynchronously** 5. Replace the placeholder with real content once ready https://github.com/user-attachments/assets/8ba5103b-a7f3-491f-a193-a5997262f4e2 --- ## 📦 Key Features - `openLazyFlyout` utility to encapsulate the new flow - Push-style flyouts by default (`type: 'push'`) - Async content loading with a nice-looking skeleton loader - Focus management: - Focuses first focusable element on open - Returns focus to `triggerId` on close - `aria-labelledby` support for proper flyout labeling --- ## 🎯 Benefits - **Better perceived performance and UX since the app doesn't feel jumpy ** - **Improved accessibility** (focus handling, ARIA labeling) - **Cleaner architecture**: encapsulated logic, reusability --- ## 🐛 Bug Fixes This PR resolves the following issues: Fixes elastic#225094 – 'push' flyout as a default Fixes elastic#188575 - a long pause between clicking and showing the flyout A11y: Fixes elastic#214921 Fixes elastic#214505 Fixes elastic#215508 Fixes elastic#195026 Fixes elastic#215845 In addition, this PR improves many unreported accessibility issues around focus and announcements. --- ## 📸 Visuals Loading flyout: <img width="401" alt="Screenshot 2025-07-08 at 15 45 59" src="https://github.com/user-attachments/assets/e6fbdf18-d9b8-4c64-b32e-8a2f2a2b3285" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
# Summary Hi Operations team! 👋 Recently I've worked on a [few](elastic#227593) [PRs](elastic#226052) that reduce our page load bundle size, and while doing so I noticed that many of our limits are much higher than the actual page load sizes. It made me think: these limits should be realistic, because they’re one of the main ways we protect page load performance. Right now, based on the current limits, we theoretically allow up to 11,452,104 bytes (~11 MB) to load upfront. But when we check the real page load, it’s only 5.192.979 bytes — about half of that. We already have a `--update-limits` flag for the `node scripts/build_kibana_platform_plugins.js --update-limits` command, but it only bumps limits up when the size grows above the limit, adding a flat 15 KB buffer to the bundle size. I’d like to propose: 1. Allowing the `--update-limits` to allow folks to also lower limits when the bundle shrinks drastically 2. Replacing the flat 15 KB buffer with 10% of the plugin’s size, so the buffer scales realistically. Right now, with ~197 plugins, `--update-limits` allows for an extra (15KB*197=) 3 MB above the total page size — which is way too much in my opinion! ## What’s in this PR ✅ Adds logic to let us lower limits automatically, not just bump them up with `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Replaces the flat +15 KB bump with a 10% buffer relative to each plugin’s size when using `node scripts/build_kibana_platform_plugins.js --update-limits` ✅ Updated the limits.yml with the result from the above script ## Why it matters 1. Keeps bundle sizes tight 2. Protects us from accidental regressions
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
…ic#226052) ## ✨ Summary This PR introduces a new `openLazyFlyout` helper to improve the **perceived performance** and **accessibility** of dashboard flyouts by changing the interaction flow. The flow is applied for the majority of the dashboard flyouts, but not all. The remaining work is encapsulated in this issue: elastic#227446 ### 🧠 Previous pattern 1. User clicks a button 2. Setup logic runs (dependencies, content load) 3. Flyout opens once ready ) ### ✅ New pattern 1. User clicks a button 2. Show a loading flyout **immediately** 3. Load the actual content **asynchronously** 5. Replace the placeholder with real content once ready https://github.com/user-attachments/assets/8ba5103b-a7f3-491f-a193-a5997262f4e2 --- ## 📦 Key Features - `openLazyFlyout` utility to encapsulate the new flow - Push-style flyouts by default (`type: 'push'`) - Async content loading with a nice-looking skeleton loader - Focus management: - Focuses first focusable element on open - Returns focus to `triggerId` on close - `aria-labelledby` support for proper flyout labeling --- ## 🎯 Benefits - **Better perceived performance and UX since the app doesn't feel jumpy ** - **Improved accessibility** (focus handling, ARIA labeling) - **Cleaner architecture**: encapsulated logic, reusability --- ## 🐛 Bug Fixes This PR resolves the following issues: Fixes elastic#225094 – 'push' flyout as a default Fixes elastic#188575 - a long pause between clicking and showing the flyout A11y: Fixes elastic#214921 Fixes elastic#214505 Fixes elastic#215508 Fixes elastic#195026 Fixes elastic#215845 In addition, this PR improves many unreported accessibility issues around focus and announcements. --- ## 📸 Visuals Loading flyout: <img width="401" alt="Screenshot 2025-07-08 at 15 45 59" src="https://github.com/user-attachments/assets/e6fbdf18-d9b8-4c64-b32e-8a2f2a2b3285" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.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
10 participants
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.
✨ Summary
This PR introduces a new
openLazyFlyouthelper to improve the perceived performance and accessibility of dashboard flyouts by changing the interaction flow. The flow is applied for the majority of the dashboard flyouts, but not all. The remaining work is encapsulated in this issue: #227446🧠 Previous pattern
✅ New pattern
Jul-08-2025.15-44-37.mp4
📦 Key Features
openLazyFlyoututility to encapsulate the new flowtype: 'push')triggerIdon closearia-labelledbysupport for proper flyout labeling🎯 Benefits
🐛 Bug Fixes
This PR resolves the following issues:
Fixes #225094 – 'push' flyout as a default
Fixes #188575 - a long pause between clicking and showing the flyout
A11y:
Fixes #214921
Fixes #214505
Fixes #215508
Fixes #195026
Fixes #215845
In addition, this PR improves many unreported accessibility issues around focus and announcements.
📸 Visuals
Loading flyout: