Refactor remaining apollo loadingKey occurrences

What does this MR do and why?

This MR replaces occurrences of apollo's loadingKey in boards selector, repository preview and subscription details components by adding a computed property which returns the apollo query's loading property. The original discussion behind refactoring this can be found in the issue #385842 (closed), but boils down to the use of loadingKey being confusing and not being used everywhere else. The issue of this MR #391260 (closed) also explains the reason for this refactor.

boards_selector.vue

For boards_selector.vue (EE and CE versions) I could not use this.$apollo.queries.<boards|recentBoards>.loading as a computed property because the loading property isn't reactive when creating a query with addSmartQuery, as is the case here. I tried refactoring such that it doesn't use addSmartQuery but instead defines it in the apollo object, but this then clashes with how the boards_selector.vue from EE uses a different boards query. I opted instead to keep addSmartQuery as is, but use 2 data properties loadingBoards and loadingRecentBoards which are set with watchLoading.

Screenshots or screen recordings

component	UI
boards_selector.vue1
repository/components/preview/index.vue
subscription_details.vue	https://www.loom.com/share/2dd6d80cee4b48f0a08016e709689eb0

¹There are 2 boards_selector components (EE and CE). The EE version is an extension of the CE one, therefore in that one the only change is the removal of the loadingKey

How to set up and validate locally

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

on non-EE:

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

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

on EE (you'll need an ultimate license):

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 http://gdk.test:3000/flightjs/Flight/-/blob/master/README.md?format=json&viewer=rich with a delay of 5000ms. You'll need to modify this url based on your local setup/which project you open

1. load any project overview with readme
2. verify that loading spinner is shown in readme section before the whole readme is displayed

alternatively, if you don't want to install the chrome extension, you could also add a console.log in the isLoading computed property: console.log(this.$apollo.queries.readme.loading), and verify that it switches to trueand afterwards tofalse.

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

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)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Close #391260 (closed)