Skip to content

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
image.png image.png image.png

How to set up and validate locally

Testing improved loading states

  1. Enable feature flag :glql_integration

  2. Embed below GLQL query in an issue description:

    ```glql
    display: table
    fields: title, assignee, state
    query: assignee = currentUser()
    ```
  3. Save

  4. Throttle page performance in developer tools to Slow 3G.

  5. Notice the new loading states.

Testing intersection observer related changes

  1. Put the GLQL block inside a collapsible section.
  2. Save.
  3. Reload the page and notice developer tools.
  4. A request will be sent only if details block is open.

Testing concurrency limit of 1

  1. Put multiple GLQL blocks on a page.
  2. Save and reload.
  3. Throttle network to slow 3G.
  4. Notice that GLQL related GraphQL requests are sent only one at a time.

Testing load on click

  1. Enable feature flag :glql_load_on_click
  2. Now a button should be visible to load a GLQL block.
Edited by Himanshu Kapoor

Merge request reports

Loading