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 addBoolean(...)
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 theloadingKey
-
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
- go to the board of a project in your personal GitLab account (where you don't have an EE license perhaps?)
- set network throttling to slow 3g
- click on board selector
- verify that it shows loading icon before displaying the boards
ee/app/assets/javascripts/boards/components/boards_selector.vue EE boards_selector
- go to board of any project
- set network throttling to slow 3g
- click on board selector
- 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.
- load gitlab-org/gitlab readme
- 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
- Make sure to run
gdk
withGITLAB_SIMULATE_SAAS=false
andCUSTOMER_PORTAL_URL=https://customers.staging.gitlab.com
- Visit
admin/subscription
- Fill the Activation Code field with
Tg7joAb8xY5ghFStpBRdRqF1
- Verify that the loading skeleton is showing while loading the Subscriptions details (might want to change network settings for more visibility)