Skip to content

Refactor remaining occurrences of apollo loadingKey

Recently, !111528 (merged) was merged to remove the use of apollo's loadingKey in security dashboard and vulnerability components. This refactor was discussed in #385842 (closed).

The reasons behind this refactor:

  • the use of the loadingKey option of apollo can be confusing
  • using loadingKey is not mentioned in their guide, but only in their API docs
  • the data property associated with the loadingKey is a counter, so ideally you need to add Boolean(...) around the property to have a boolean representation of whether or not the query is loading
  • $apollo.queries.<queryName>.loading is used everywhere else in GitLab

There still remain 5 occurrences of loadingKey:

  • 2 in /app/assets/javascripts/boards/components/boards_selector.vue
  • app/assets/javascripts/repository/components/preview/index.vue
  • ee/app/assets/javascripts/boards/components/boards_selector.vue
  • ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue

Implementation plan

For each occurrence

  • remove loadingKey option in apollo config and remove data property associated with the loadingKey
  • add computed property isLoading or similar which returns $apollo.queries.<queryName>.loading
  • replace uses of loadingKey with new computed property

Verification steps

app/assets/javascripts/boards/components/boards_selector.vue non EE boards_selector

  1. go to the board of a project in your personal GitLab account (where you don't have an EE license perhaps?)
  2. set network throttling to slow 3g
  3. click on board selector
  4. verify that it shows loading icon before displaying the boards

ee/app/assets/javascripts/boards/components/boards_selector.vue EE boards_selector

  1. go to board of any project
  2. set network throttling to slow 3g
  3. click on board selector
  4. verify that it shows loading icon before displaying the boards

app/assets/javascripts/repository/components/preview/index.vue it seems, even with throttling that the request for the readme loads quicker than other things. So to be able to throttle only the readme api request, I used a URL Throttler chrome extension and added https://gitlab.com/gitlab-org/gitlab/-/blob/master/README.md?format=json&viewer=rich with a delay of 5000ms.

  1. load gitlab-org/gitlab readme
  2. verify that loading spinner is shown in readme section before the whole readme is displayed

ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue

only local possible, I think

  1. Make sure to run gdk with GITLAB_SIMULATE_SAAS=false and CUSTOMER_PORTAL_URL=https://customers.staging.gitlab.com
  2. Visit admin/subscription
  3. Fill the Activation Code field with Tg7joAb8xY5ghFStpBRdRqF1
  4. Verify that the loading skeleton is showing while loading the Subscriptions details (might want to change network settings for more visibility)
Edited by Lorenz van Herwaarden