Utilize Intersection Observer to lazy load metrics charts
Problem to solve
It is possible to load a large number of metrics charts on one page, either through a dashboard with many custom metrics or a page with a large number of embedded metric charts. This can lead to performance issues.
Intended users
Further details
The app will typically attempt to fetch data for and render all metric charts on the page simultaneously. There are a number of problems that may arise from this:
- Rendering many charts is costly to browser performance (open issue: #196631 (closed))
- This will generate a large sidekiq queue of requests to the prometheus/grafana server.
- The browser will poll at least 3 times per chart before it gives up, meaning many requests to the server.
- Some data requests may eventually time out, resulting in empty charts and error messages.
Proposal
We already lazy-load images in GFM by using an Intersection Observer. We could apply the same approach to metrics by only loading metric charts when they are near the existing viewport.
The optimum user experience would be to know chart height ahead of time and block out unloaded chart areas with a (hopefully cheap) 'chart loading' indicator.
Permissions and Security
None - frontend only
Documentation
Availability & Testing
What does success look like, and how can we measure that?
What is the type of buyer?
Links / references
Edited by Tristan Read