Loading
Load GLQL dashboard panels half a viewport ahead
What does this MR do and why?
The IntersectionObserver that defers offscreen GLQL dashboard panels now uses rootMargin: '50% 0px' instead of '100% 0px'. A panel starts its GLQL queries once it is within half a viewport height below the visible area of the dashboard scroll container, not a full viewport height.
Measured on gitlab.com on 2026-09-30 on the DAP Impact dashboard (viewport 1515x1467). With the full margin, everything in roughly the top 2730 px of a tab counted as near view. The Adoption tab is about 2900 px tall, so all 11 panels loaded on tab switch, including the Group and project comparison table about 2400 px down. Its previous-period query takes 2.4 s and waited for a free request slot, so Adoption's time to all results went from 2.4-2.8 s to 3.7-4.3 s. With the half margin, panels below roughly 2050 px wait until the user scrolls toward them. The preload MR !258139 (closed) fetches deferred panels after the visible ones load, so this change only decides which panels go first.
References
- https://gitlab.com/gitlab-org/gitlab/-/work_items/630507: parent work item
- https://gitlab.com/gitlab-org/gitlab/-/work_items/630507#note_3928829381: measurements
- !257486 (merged): MR that introduced the deferral
- !258139 (closed): MR that preloads deferred panels
Screenshots or screen recordings
Not applicable, no visual change. Panels more than half a viewport below the fold now load when scrolled toward.
How to set up and validate locally
- Open a GLQL analytics dashboard with a tab taller than the viewport, for example the DAP Impact dashboard at
/explore/analytics_dashboards/dap_impact?scope=<top-level group>with ClickHouse data in GDK. - Open DevTools, Network tab, filter on
/api/glql. - Switch to the Adoption tab. Panels that start more than half a viewport below the fold send no request until you scroll toward them; on master they request immediately when within a full viewport.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.