Replace deprecated GlLoadingIcon sizes

See GlLoadingIcon component
in @gitlab/ui for size mappings.

app/assets/javascripts/badges/components/badge_list.vue

@@ -28,7 +28,7 @@ export default {
       {{ s__('Badges|Your badges') }}
       <span v-show="!isLoading" class="badge badge-pill">{{ badges.length }}</span>
     </div>
-    <gl-loading-icon v-show="isLoading" :size="2" class="card-body" />
+    <gl-loading-icon v-show="isLoading" size="lg" class="card-body" />
     <div v-if="hasNoBadges" class="card-body">
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>

app/assets/javascripts/contributors/components/contributors.vue

@@ -197,7 +197,7 @@ export default {
 <template>
   <div>
     <div v-if="loading" class="contributors-loader text-center">
-      <gl-loading-icon :inline="true" :size="4" />
+      <gl-loading-icon :inline="true" size="xl" />
     </div>
 
     <div v-else-if="showChart" class="contributors-charts">

app/assets/javascripts/deploy_keys/components/app.vue

@@ -119,7 +119,7 @@ export default {
     <gl-loading-icon
       v-if="isLoading && !hasKeys"
       :label="s__('DeployKeys|Loading deploy keys')"
-      :size="2"
+      size="lg"
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -225,7 +225,7 @@ export default {
 <template>
   <div>
     <div v-if="errorLoading" class="py-3">
-      <gl-loading-icon :size="3" />
+      <gl-loading-icon size="lg" />
     </div>
     <div v-else-if="error" class="error-details">
       <gl-alert v-if="isAlertVisible" @dismiss="isAlertVisible = false">
@@ -405,7 +405,7 @@ export default {
         </ul>
 
         <div v-if="loadingStacktrace" class="py-3">
-          <gl-loading-icon :size="3" />
+          <gl-loading-icon size="lg" />
         </div>
 
         <template v-else-if="showStacktrace">

app/assets/javascripts/frequent_items/components/app.vue

@@ -107,7 +107,7 @@ export default {
     <gl-loading-icon
       v-if="isLoadingItems"
       :label="translations.loadingMessage"
-      :size="2"
+      size="lg"
       class="loading-animation prepend-top-20"
     />
     <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header">

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -72,7 +72,7 @@ export default {
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
-        :size="2"
+        size="lg"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
       <ul v-else class="mb-0 w-100">

app/assets/javascripts/ide/components/file_templates/dropdown.vue

@@ -88,7 +88,7 @@ export default {
         <i aria-hidden="true" class="fa fa-search dropdown-input-search"></i>
       </div>
       <div class="dropdown-content">
-        <gl-loading-icon v-if="showLoading" :size="2" />
+        <gl-loading-icon v-if="showLoading" size="lg" />
         <ul v-else>
           <li v-for="(item, index) in outputData" :key="index">
             <button type="button" @click="clickItem(item)">{{ item.name }}</button>

app/assets/javascripts/ide/components/jobs/list.vue

@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="loading && !stages.length" :size="2" class="prepend-top-default" />
+    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" />
     <template v-else>
       <stage
         v-for="stage in stages"

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -90,7 +90,7 @@ export default {
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
-        :size="2"
+        size="lg"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
       <template v-else>

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -56,7 +56,7 @@ export default {
 
 <template>
   <div class="ide-pipeline">
-    <gl-loading-icon v-if="showLoadingIcon" :size="2" class="prepend-top-default" />
+    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" />
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />

app/assets/javascripts/ide/components/preview/clientside.vue

@@ -176,6 +176,6 @@ export default {
         {{ s__('IDE|Get started with Live Preview') }}
       </a>
     </div>
-    <gl-loading-icon v-else :size="2" class="align-self-center mt-auto mb-auto" />
+    <gl-loading-icon v-else size="lg" class="align-self-center mt-auto mb-auto" />
   </div>
 </template>

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -135,7 +135,7 @@ export default {
           paddingRight: `${graphRightPadding}px`,
         }"
       >
-        <gl-loading-icon v-if="isLoading" class="m-auto" :size="3" />
+        <gl-loading-icon v-if="isLoading" class="m-auto" size="lg" />
 
         <pipeline-graph
           v-if="pipelineTypeUpstream"

app/assets/javascripts/pipelines/components/header_component.vue

@@ -108,7 +108,7 @@ export default {
       />
     </ci-header>
 
-    <gl-loading-icon v-if="isLoading" :size="2" class="prepend-top-default append-bottom-default" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default append-bottom-default" />
 
     <gl-modal
       :modal-id="$options.DELETE_MODAL_ID"

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -271,7 +271,7 @@ export default {
       <gl-loading-icon
         v-if="stateToRender === $options.stateMap.loading"
         :label="s__('Pipelines|Loading Pipelines')"
-        :size="3"
+        size="lg"
         class="prepend-top-20"
       />
 

app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue

@@ -94,7 +94,7 @@ export default {
 </script>
 <template>
   <div class="ci-status-link">
-    <gl-loading-icon v-if="isLoading" :size="3" label="Loading pipeline status" />
+    <gl-loading-icon v-if="isLoading" size="lg" label="Loading pipeline status" />
     <a v-else :href="ciStatus.details_path">
       <ci-icon
         v-tooltip

app/assets/javascripts/sentry_error_stack_trace/components/sentry_error_stack_trace.vue

@@ -36,7 +36,7 @@ export default {
       </div>
     </div>
     <div v-if="loadingStacktrace" class="card">
-      <gl-loading-icon class="py-2" label="Fetching stack trace" :size="1" />
+      <gl-loading-icon class="py-2" label="Fetching stack trace" size="sm" />
     </div>
     <stacktrace v-else :entries="stacktrace" />
   </div>

app/assets/javascripts/serverless/components/functions.vue

@@ -77,7 +77,7 @@ export default {
   <section id="serverless-functions" class="flex-grow">
     <gl-loading-icon
       v-if="checkingInstalled"
-      :size="2"
+      size="lg"
       class="prepend-top-default append-bottom-default"
     />
 
@@ -97,7 +97,7 @@ export default {
         </template>
         <gl-loading-icon
           v-if="isLoading"
-          :size="2"
+          size="lg"
           class="prepend-top-default append-bottom-default js-functions-loader"
         />
       </div>

app/assets/javascripts/snippets/components/show.vue

@@ -46,7 +46,7 @@ export default {
     <gl-loading-icon
       v-if="isLoading"
       :label="__('Loading snippet')"
-      :size="2"
+      size="lg"
       class="loading-animation prepend-top-20 append-bottom-20"
     />
     <template v-else>

app/assets/javascripts/snippets/components/snippet_blob_edit.vue

@@ -37,7 +37,7 @@ export default {
       <gl-loading-icon
         v-if="isLoading"
         :label="__('Loading snippet')"
-        :size="2"
+        size="lg"
         class="loading-animation prepend-top-20 append-bottom-20"
       />
       <blob-content-edit

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

@@ -80,7 +80,7 @@ export default {
       @input="onInput"
     />
     <div class="d-flex flex-column">
-      <gl-loading-icon v-if="showLoadingIndicator" :size="1" class="py-2 px-4" />
+      <gl-loading-icon v-if="showLoadingIndicator" size="sm" class="py-2 px-4" />
       <gl-infinite-scroll
         :max-list-height="402"
         :fetched-items="projectSearchResults.length"

changelogs/unreleased/vs-migrate-deprecated-size-in-loading-icon.yml

+---
+title: Replace deprecated GlLoadingIcon sizes
+merge_request: 29417
+author:
+type: fixed