-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[dashboard][labs] Defer loading panels below the fold #99880
[dashboard][labs] Defer loading panels below the fold #99880
Conversation
Pinging @elastic/kibana-presentation (Team:Presentation) |
97662ae
to
2d8efd7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Telemetry changes LGTM
This is really great. I'm eager to test out both the Labs UI itself and the 'projects'. Kent and I were discussing a baseline evaluation of Dashboards (in prep of the aesthetic improvements), so perhaps we can lump these things together given our limited bandwidth for research, at the moment. |
Please think about what sort of validation you need in order to turn this ON by default |
@clintandrewhall, how would this feature work with Reporting? Could it happen that some panels are not loaded in the reports? |
@afharo I ran tests against Labs/No Labs/master... all of the PDFs were identical, in that they were broken the same way:
So this Observer API change had no effect on reporting. Examples
|
5a4d44c
to
f11f93c
Compare
@elasticmachine merge upstream |
Always nice to see when super old issues finally get addressed, in this case: #3903. It usually means a lot of foundational work needed to be done first, hence the long and worthwhile wait. ❤️ |
@elasticmachine merge upstream |
💚 Build SucceededMetrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
References to deprecated APIs
History
To update your PR or re-run it, just comment with: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested this locally on chrome and everything works as advertised. Loading tall dashboards (especially the flights dashboard) feels much faster.
I also looked through the code, and everything is looking really clean and well structured. I especially like the dashboard_grid_item
implementation.
I agree that a good next step would be to load the panels below the fold if they come into view OR the panels above the fold have all completely finished loading. I also think we could attempt to turn this on by default soon to see which functional tests it would fail.
This is really exciting stuff! LGTM!
Co-authored-by: Kibana Machine <[email protected]>
💚 Backport successful
This backport PR will be merged automatically after passing CI. |
Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Clint Andrew Hall <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Fixes #76686
Addresses #14750
Addresses #3903
Summary
This PR does two things:
1/ introduces Labs to Dashboard, and
2/ adds a new Lab project for deferring the rendering of any panel below "the fold", or the area beneath the bottom edge of the viewport
The goal is to evaluate the change against a number of dashboard examples. I'd also like to see this demonstrated by usability study to anyone with high-throughput dashboards to see if the perceived performance is improved.
cc: @kmartastic @AlonaNadler @ryankeairns
Screen.Recording.2021-05-11.at.11.40.22.PM.mov
Implementation
This PR uses the Intersection Observer API to defer loading of any panel until it intersects with the viewport. After being rendered, the observer is ignored.
Future Work