Address potential performance concerns in GLQL
What does this MR do and why?
Address potential performance concerns in GLQL
To address potential performance concerns in GLQL we now:
- Load GLQL blocks only when they are in view using IntersectionObserver
- Use a TaskQueue to ensure only one request at a time is handled
- Use a feature flag glql_load_on_click which when turned on only loads GLQL blocks on demand
- Show a preview block using skeleton loaders to make the block loading state more elegant
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- #517546
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
New loading states
| List view | Table view |
|---|---|
| Screen Recording 2025-02-10 at 16.09.48.mov | Screen Recording 2025-02-10 at 16.08.41.mov |
Load on click states
| Dark mode + dark syntax highlighting | Light mode + light syntax highlighting | Light mode + dark syntax highlighting |
|---|---|---|
|
|
|
How to set up and validate locally
Testing improved loading states
-
Enable feature flag
:glql_integration -
Embed below GLQL query in an issue description:
```glql display: table fields: title, assignee, state query: assignee = currentUser() ``` -
Save
-
Throttle page performance in developer tools to Slow 3G.
-
Notice the new loading states.
Testing intersection observer related changes
- Put the GLQL block inside a collapsible section.
- Save.
- Reload the page and notice developer tools.
- A request will be sent only if details block is open.
Testing concurrency limit of 1
- Put multiple GLQL blocks on a page.
- Save and reload.
- Throttle network to slow 3G.
- Notice that GLQL related GraphQL requests are sent only one at a time.
Testing load on click
- Enable feature flag
:glql_load_on_click - Now a button should be visible to load a GLQL block.
Edited by Himanshu Kapoor


