Add size-prop to all GlLoadingIcon instances

This change adds a size to all gitlab-ui loading icons as part
of a migration effort to change the loading spinners default
size to "md".

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

@@ -84,7 +84,7 @@ export default {
       />
     </a>
 
-    <gl-loading-icon v-show="isLoading" :inline="true" />
+    <gl-loading-icon v-show="isLoading" size="sm" :inline="true" />
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">

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

@@ -221,7 +221,7 @@ export default {
         :link-url="renderedLinkUrl"
       />
       <p v-show="isRendering">
-        <gl-loading-icon :inline="true" />
+        <gl-loading-icon size="sm" :inline="true" />
       </p>
       <p v-show="!renderedBadge && !isRendering" class="disabled-content">
         {{ s__('Badges|No image to preview') }}

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

@@ -73,7 +73,7 @@ export default {
           data-testid="delete-badge"
           @click="updateBadgeInModal(badge)"
         />
-        <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
+        <gl-loading-icon v-show="badge.isDeleting" size="sm" :inline="true" />
       </div>
     </div>
   </div>

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

@@ -163,7 +163,7 @@ export default {
         ><span data-testid="popover-title">{{ blockedLabel }}</span></template
       >
       <template v-if="loading">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
         <p class="gl-mt-4 gl-mb-0 gl-font-small">{{ loadingMessage }}</p>
       </template>
       <template v-else>

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

@@ -242,7 +242,7 @@ export default {
       :aria-label="$options.i18n.loading"
       data-testid="board_list_loading"
     >
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
     </div>
     <board-new-issue v-if="issueCreateFormVisible" :list="list" />
     <board-new-epic v-if="epicCreateFormVisible" :list="list" />

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

@@ -429,7 +429,7 @@ export default {
     data-qa-selector="board_list_cards_area"
   >
     <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
     </div>
     <board-new-issue v-if="list.type !== 'closed' && showIssueForm" :list="list" />
     <ul
@@ -450,7 +450,7 @@ export default {
         :disabled="disabled"
       />
       <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
-        <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
+        <gl-loading-icon v-show="list.loadingMore" size="sm" label="Loading more issues" />
         <span v-if="list.issues.length === list.issuesSize">{{ __('Showing all issues') }}</span>
         <span v-else>{{ paginatedIssueText }}</span>
       </li>

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

@@ -327,7 +327,7 @@ export default {
           :class="scrollFadeClass"
         ></div>
 
-        <gl-loading-icon v-if="loading" />
+        <gl-loading-icon v-if="loading" size="sm" />
 
         <div v-if="canAdminBoard">
           <gl-dropdown-divider />

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

@@ -316,7 +316,7 @@ export default {
           :class="scrollFadeClass"
         ></div>
 
-        <gl-loading-icon v-if="loading" />
+        <gl-loading-icon v-if="loading" size="sm" />
 
         <div v-if="canAdminBoard">
           <gl-dropdown-divider />

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

@@ -126,7 +126,7 @@ export default {
         v-show="groupProjectsFlags.isLoading"
         data-testid="dropdown-text-loading-icon"
       >
-        <gl-loading-icon class="gl-mx-auto" />
+        <gl-loading-icon class="gl-mx-auto" size="sm" />
       </gl-dropdown-text>
       <gl-dropdown-text
         v-if="isFetchResultEmpty && !groupProjectsFlags.isLoading"

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

@@ -136,7 +136,7 @@ export default {
         {{ project.namespacedName }}
       </gl-dropdown-item>
       <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-        <gl-loading-icon class="gl-mx-auto" />
+        <gl-loading-icon class="gl-mx-auto" size="sm" />
       </gl-dropdown-text>
       <gl-dropdown-text v-if="isFetchResultEmpty && !isFetching" data-testid="empty-result-message">
         <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span>

app/assets/javascripts/boards/components/sidebar/board_editable_item.vue

@@ -93,7 +93,7 @@ export default {
         <slot name="title">
           <span data-testid="title">{{ title }}</span>
         </slot>
-        <gl-loading-icon v-if="loading" inline class="gl-ml-2" />
+        <gl-loading-icon v-if="loading" size="sm" inline class="gl-ml-2" />
       </span>
       <gl-button
         v-if="canUpdate"

app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue

@@ -95,7 +95,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

@@ -160,7 +160,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span

app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue

@@ -84,7 +84,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span

app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue

@@ -218,7 +218,7 @@ export default {
         @input="debouncedValidateQuery"
       />
       <span v-if="queryValidateInFlight" class="form-text text-muted">
-        <gl-loading-icon :inline="true" class="mr-1 align-middle" />
+        <gl-loading-icon size="sm" :inline="true" class="mr-1 align-middle" />
         {{ s__('Metrics|Validating query') }}
       </span>
       <slot v-if="!queryValidateInFlight" name="valid-feedback">

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -221,7 +221,7 @@ export default {
             @click.stop="toggleResolvedStatus"
           >
             <gl-icon v-if="!isResolving" :name="resolveIconName" data-testid="resolve-icon" />
-            <gl-loading-icon v-else inline />
+            <gl-loading-icon v-else size="sm" inline />
           </button>
         </template>
         <template v-if="discussion.resolved" #resolved-status>

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -467,7 +467,7 @@ export default {
               :disabled="diffFile.isLoadingFullFile"
               @click="toggleFullDiff(diffFile.file_path)"
             >
-              <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
+              <gl-loading-icon v-if="diffFile.isLoadingFullFile" size="sm" inline />
               {{ expandDiffToFullFileTitle }}
             </gl-dropdown-item>
           </template>

app/assets/javascripts/environments/components/deploy_board.vue

@@ -111,7 +111,7 @@ export default {
 </script>
 <template>
   <div class="js-deploy-board deploy-board">
-    <gl-loading-icon v-if="isLoading" class="loading-icon" />
+    <gl-loading-icon v-if="isLoading" size="sm" class="loading-icon" />
     <template v-else>
       <div v-if="canRenderDeployBoard" class="deploy-board-information gl-p-5">
         <div class="deploy-board-information gl-w-full">

app/assets/javascripts/environments/components/environment_actions.vue

@@ -80,7 +80,7 @@ export default {
     <template #button-content>
       <gl-icon name="play" />
       <gl-icon name="chevron-down" />
-      <gl-loading-icon v-if="isLoading" />
+      <gl-loading-icon v-if="isLoading" size="sm" />
     </template>
     <gl-dropdown-item
       v-for="(action, i) in actions"

app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -80,7 +80,7 @@ export default {
       @focus="fetchEnvironments"
       @keyup="fetchEnvironments"
     />
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <gl-dropdown-item
       v-for="environment in results"
       v-else-if="results.length"

app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue

@@ -76,7 +76,7 @@ export default {
           @focus="fetchUserLists"
           @keyup="fetchUserLists"
         />
-        <gl-loading-icon v-if="isLoading" />
+        <gl-loading-icon v-if="isLoading" size="sm" />
         <gl-dropdown-item
           v-for="list in userLists"
           :key="list.id"

app/assets/javascripts/group_settings/components/shared_runners_form.vue

@@ -101,7 +101,7 @@ export default {
 
     <h4 class="gl-display-flex gl-align-items-center">
       {{ __('Set up shared runner availability') }}
-      <gl-loading-icon v-if="isLoading" class="gl-ml-3" inline />
+      <gl-loading-icon v-if="isLoading" class="gl-ml-3" size="sm" inline />
     </h4>
 
     <section class="gl-mt-5">

app/assets/javascripts/ide/components/error_message.vue

@@ -57,6 +57,6 @@ export default {
     @primaryAction="doAction"
   >
     <span v-html="message.text"></span>
-    <gl-loading-icon v-show="isLoading" inline class="vertical-align-middle ml-1" />
+    <gl-loading-icon v-show="isLoading" size="sm" inline class="vertical-align-middle ml-1" />
   </gl-alert>
 </template>

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

@@ -79,7 +79,7 @@ export default {
       <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0">
-      <gl-loading-icon v-if="showLoadingIcon" />
+      <gl-loading-icon v-if="showLoadingIcon" size="sm" />
       <template v-else>
         <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" />
       </template>

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

@@ -126,7 +126,11 @@ export default {
         class="ide-navigator-location form-control bg-white"
         readonly
       />
-      <gl-loading-icon v-if="loading" class="position-absolute ide-preview-loading-icon" />
+      <gl-loading-icon
+        v-if="loading"
+        size="sm"
+        class="position-absolute ide-preview-loading-icon"
+      />
     </div>
   </header>
 </template>

app/assets/javascripts/ide/components/terminal/terminal.vue

@@ -93,7 +93,7 @@ export default {
   <div class="d-flex flex-column flex-fill min-height-0 pr-3">
     <div class="top-bar d-flex border-left-0 align-items-center">
       <div v-if="loadingText" data-qa-selector="loading_container">
-        <gl-loading-icon :inline="true" />
+        <gl-loading-icon size="sm" :inline="true" />
         <span>{{ loadingText }}</span>
       </div>
       <terminal-controls

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -310,7 +310,7 @@ export default {
           >
             <gl-search-box-by-type v-model.trim="searchTerm" />
 
-            <gl-loading-icon v-if="isFetching" />
+            <gl-loading-icon v-if="isFetching" size="sm" />
 
             <gl-dropdown-item
               v-for="user in users"
@@ -328,7 +328,7 @@ export default {
         </template>
       </gl-table>
 
-      <gl-loading-icon v-if="isInitialLoadingState" />
+      <gl-loading-icon v-if="isInitialLoadingState" size="sm" />
 
       <gl-button
         v-if="hasMoreUsers"

app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue

@@ -20,7 +20,7 @@ export default {
   <gl-filtered-search-token :config="config" v-bind="{ ...$attrs }" v-on="$listeners">
     <template #suggestions>
       <div class="m-1">
-        <gl-loading-icon v-if="config.loading" />
+        <gl-loading-icon v-if="config.loading" size="sm" />
         <div v-else class="py-1 px-2 text-muted">
           {{ config.noOptionsText }}
         </div>

app/assets/javascripts/milestones/components/milestone_combobox.vue

@@ -202,7 +202,7 @@ export default {
     <gl-dropdown-divider />
 
     <template v-if="isLoading">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
       <gl-dropdown-divider />
     </template>
     <template v-else-if="showNoResults">

app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -227,7 +227,7 @@ export default {
 
 <template>
   <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
-    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" />
+    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" size="sm" />
     <span v-else-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
       errorMessage
     }}</span>

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -197,7 +197,7 @@ export default {
           <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
           <gl-search-box-by-type @input="debouncedEnvironmentsSearch" />
 
-          <gl-loading-icon v-if="environmentsLoading" :inline="true" />
+          <gl-loading-icon v-if="environmentsLoading" size="sm" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
             <gl-dropdown-item
               v-for="environment in filteredEnvironments"

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -389,7 +389,7 @@ export default {
       />
       <div class="flex-grow-1"></div>
       <div v-if="graphDataIsLoading" class="mx-1 mt-1">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
       </div>
       <div
         v-if="isContextualMenuShown"

app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue

@@ -88,7 +88,7 @@ export default {
       @change="formChange"
     />
     <template #modal-ok>
-      <gl-loading-icon v-if="loading" inline color="light" />
+      <gl-loading-icon v-if="loading" size="sm" inline color="light" />
       {{ okButtonText }}
     </template>
   </gl-modal>

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -61,7 +61,7 @@ export default {
   <div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <gl-loading-icon v-if="isLoading" name="loading" />
+      <gl-loading-icon v-if="isLoading" size="sm" name="loading" />
       <a
         data-testid="group-toggle-button"
         :aria-label="__('Toggle collapse')"

app/assets/javascripts/notifications/components/custom_notifications_modal.vue

@@ -132,7 +132,7 @@ export default {
                 @change="updateEvent($event, event)"
               >
                 <strong>{{ event.name }}</strong
-                ><gl-loading-icon v-if="event.loading" :inline="true" class="gl-ml-2" />
+                ><gl-loading-icon v-if="event.loading" size="sm" :inline="true" class="gl-ml-2" />
               </gl-form-checkbox>
             </gl-form-group>
           </template>

app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue

@@ -475,7 +475,11 @@ export default {
               >
             </gl-sprintf>
           </gl-alert>
-          <gl-loading-icon v-if="isContentEditorLoading" class="bordered-box gl-w-full gl-py-6" />
+          <gl-loading-icon
+            v-if="isContentEditorLoading"
+            size="sm"
+            class="bordered-box gl-w-full gl-py-6"
+          />
           <content-editor v-else :content-editor="contentEditor" />
           <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" />
         </div>

app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue

@@ -87,7 +87,7 @@ export default {
 <template>
   <div>
     <template v-if="isLoading">
-      <gl-loading-icon inline />
+      <gl-loading-icon size="sm" inline />
       {{ $options.i18n.loading }}
     </template>
 

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

@@ -161,7 +161,7 @@ export default {
           :size="24"
           css-classes="gl-top-0 gl-pr-2"
         />
-        <div v-else class="gl-pr-2"><gl-loading-icon inline /></div>
+        <div v-else class="gl-pr-2"><gl-loading-icon size="sm" inline /></div>
         <div class="gl-display-flex gl-flex-direction-column gl-w-13">
           <span class="gl-text-truncate" data-testid="downstream-title">
             {{ downstreamTitle }}

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

@@ -99,7 +99,7 @@ export default {
     class="js-ci-action gl-ci-action-icon-container ci-action-icon-container ci-action-icon-wrapper gl-display-flex gl-align-items-center gl-justify-content-center"
     @click.stop="onClickAction"
   >
-    <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
+    <gl-loading-icon v-if="isLoading" size="sm" class="js-action-icon-loading" />
     <gl-icon v-else :name="actionIcon" class="gl-mr-0!" :aria-label="actionIcon" />
   </gl-button>
 </template>

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

@@ -97,7 +97,7 @@ export default {
       {{ $options.i18n.artifactsFetchErrorMessage }}
     </gl-alert>
 
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
 
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"

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

@@ -120,7 +120,7 @@ export default {
         <gl-icon :name="borderlessIcon" />
       </span>
     </template>
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <ul
       v-else
       class="js-builds-dropdown-list scrollable-menu"

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

@@ -96,7 +96,7 @@ export default {
       {{ $options.i18n.artifactsFetchErrorMessage }}
     </gl-alert>
 
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
 
     <gl-alert v-else-if="!hasArtifacts" variant="info" :dismissible="false">
       {{ $options.i18n.noArtifacts }}

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue

@@ -60,7 +60,7 @@ export default {
     @input="searchBranches"
   >
     <template #suggestions>
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="(branch, index) in branches"

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue

@@ -55,7 +55,7 @@ export default {
 <template>
   <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" @input="searchTags">
     <template #suggestions>
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="(tag, index) in tags" :key="index" :value="tag">
           {{ tag }}

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue

@@ -98,7 +98,7 @@ export default {
       }}</gl-filtered-search-suggestion>
       <gl-dropdown-divider />
 
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="user in users"

app/assets/javascripts/projects/commit/components/branches_dropdown.vue

@@ -99,7 +99,7 @@ export default {
       {{ branch }}
     </gl-dropdown-item>
     <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-      <gl-loading-icon class="gl-mx-auto" />
+      <gl-loading-icon size="sm" class="gl-mx-auto" />
     </gl-dropdown-text>
     <gl-dropdown-text
       v-if="!filteredResults.length && !isFetching"

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

@@ -144,7 +144,7 @@ export default {
           </span>
         </template>
         <template v-else>
-          <gl-loading-icon :inline="true" />
+          <gl-loading-icon size="sm" :inline="true" />
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 

app/assets/javascripts/related_issues/components/related_issues_list.vue

@@ -102,7 +102,12 @@ export default {
         class="related-issues-loading-icon"
         data-qa-selector="related_issues_loading_placeholder"
       >
-        <gl-loading-icon ref="loadingIcon" label="Fetching linked issues" class="gl-mt-2" />
+        <gl-loading-icon
+          ref="loadingIcon"
+          size="sm"
+          label="Fetching linked issues"
+          class="gl-mt-2"
+        />
       </div>
       <ul ref="list" :class="{ 'content-list': !canReorder }" class="related-items-list">
         <li

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -94,7 +94,7 @@ export default {
       </div>
       <div>
         <div v-if="isFetchingMergeRequests" class="qa-related-merge-requests-loading-icon">
-          <gl-loading-icon label="Fetching related merge requests" class="py-2" />
+          <gl-loading-icon size="sm" label="Fetching related merge requests" class="py-2" />
         </div>
         <ul v-else class="content-list related-items-list">
           <li v-for="mr in mergeRequests" :key="mr.id" class="list-item pt-0 pb-0">

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -150,7 +150,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <div v-if="blobInfo && !isLoading" class="file-holder">
       <blob-header
         :blob="blobInfo"

app/assets/javascripts/search/topbar/components/searchable_dropdown.vue

@@ -99,7 +99,7 @@ export default {
       <span class="dropdown-toggle-text gl-flex-grow-1 gl-text-truncate">
         {{ selectedItem[name] }}
       </span>
-      <gl-loading-icon v-if="loading" inline class="gl-mr-3" />
+      <gl-loading-icon v-if="loading" size="sm" inline class="gl-mr-3" />
       <gl-button
         v-if="!isSelected($options.ANY_OPTION)"
         v-gl-tooltip

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

@@ -47,7 +47,7 @@ export default {
 <template>
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ assigneeTitle }}
-    <gl-loading-icon v-if="loading" inline class="align-bottom" />
+    <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -92,11 +92,11 @@ export default {
       @click="onClickCollapsedIcon"
     >
       <gl-icon name="users" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
     </div>
     <div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2">
-      <gl-loading-icon v-if="loading" :inline="true" />
+      <gl-loading-icon v-if="loading" size="sm" :inline="true" />
       {{ participantLabel }}
     </div>
     <div class="participants-list hide-collapsed">

app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue

@@ -35,7 +35,7 @@ export default {
 <template>
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ reviewerTitle }}
-    <gl-loading-icon v-if="loading" inline class="align-bottom" />
+    <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"

app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue

@@ -181,7 +181,7 @@ export default {
         </gl-dropdown-item>
       </gl-dropdown>
 
-      <gl-loading-icon v-if="isUpdating" :inline="true" />
+      <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
 
       <severity-token v-else-if="!isDropdownShowing" :severity="selectedItem" />
     </div>

app/assets/javascripts/sidebar/components/sidebar_editable_item.vue

@@ -117,7 +117,12 @@ export default {
         {{ title }}
       </span>
       <slot name="title-extra"></slot>
-      <gl-loading-icon v-if="loading || initialLoading" inline class="gl-ml-2 hide-collapsed" />
+      <gl-loading-icon
+        v-if="loading || initialLoading"
+        size="sm"
+        inline
+        class="gl-ml-2 hide-collapsed"
+      />
       <gl-loading-icon
         v-if="loading && isClassicSidebar"
         inline

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue

@@ -196,7 +196,7 @@ export default {
         class="sidebar-collapsed-icon"
         @click="toggleSubscribed"
       >
-        <gl-loading-icon v-if="isLoading" class="sidebar-item-icon is-active" />
+        <gl-loading-icon v-if="isLoading" size="sm" class="sidebar-item-icon is-active" />
         <gl-icon v-else :name="notificationIcon" :size="16" class="sidebar-item-icon is-active" />
       </span>
       <div v-show="emailsDisabled" class="gl-mt-3 hide-collapsed gl-text-gray-500">

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -200,7 +200,7 @@ export default {
     />
     <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
       {{ __('Time tracking') }}
-      <gl-loading-icon v-if="isTimeTrackingInfoLoading" inline />
+      <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline />
       <div
         v-if="!showHelpState"
         data-testid="helpButton"

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -85,6 +85,6 @@ export default {
       :name="collapsedButtonIcon"
     />
     <span v-show="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
-    <gl-loading-icon v-show="isActionActive" :inline="true" />
+    <gl-loading-icon v-show="isActionActive" size="sm" :inline="true" />
   </button>
 </template>

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

@@ -274,7 +274,7 @@ export default {
           data-qa-selector="delete_snippet_button"
           @click="deleteSnippet"
         >
-          <gl-loading-icon v-if="isDeleting" inline />
+          <gl-loading-icon v-if="isDeleting" size="sm" inline />
           {{ __('Delete snippet') }}
         </gl-button>
       </template>

app/assets/javascripts/terraform/components/states_table.vue

@@ -137,7 +137,7 @@ export default {
 
         <div v-if="item.loadingLock" class="gl-mx-3">
           <p class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0">
-            <gl-loading-icon class="gl-pr-1" />
+            <gl-loading-icon size="sm" class="gl-pr-1" />
             {{ loadingLockText(item) }}
           </p>
         </div>
@@ -146,7 +146,7 @@ export default {
           <p
             class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0 gl-text-red-500"
           >
-            <gl-loading-icon class="gl-pr-1" />
+            <gl-loading-icon size="sm" class="gl-pr-1" />
             {{ $options.i18n.removing }}
           </p>
         </div>

app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue

@@ -136,7 +136,7 @@ export default {
 <template>
   <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
     <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading">
-      <gl-loading-icon class="usage-info-load-spinner" />{{
+      <gl-loading-icon size="sm" class="usage-info-load-spinner" />{{
         s__('mrWidget|Loading deployment statistics')
       }}
     </p>

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -122,7 +122,7 @@ export default {
     </div>
     <div v-if="!isCollapsed" class="mr-widget-grouped-section">
       <div v-if="isLoadingExpanded" class="report-block-container">
-        <gl-loading-icon inline /> {{ __('Loading...') }}
+        <gl-loading-icon size="sm" inline /> {{ __('Loading...') }}
       </div>
       <smart-virtual-list
         v-else-if="fullData"

app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue

@@ -64,7 +64,7 @@ export default {
           :disabled="isLoading"
           @click="toggleCollapsed"
         >
-          <gl-loading-icon v-if="isLoading" />
+          <gl-loading-icon v-if="isLoading" size="sm" />
           <gl-icon v-else :name="arrowIconName" class="js-icon" />
         </button>
         <template v-if="isCollapsed">

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue

@@ -177,7 +177,7 @@ export default {
             data-testid="cancelAutomaticMergeButton"
             @click.prevent="cancelAutomaticMerge"
           >
-            <gl-loading-icon v-if="isCancellingAutoMerge" inline class="gl-mr-1" />
+            <gl-loading-icon v-if="isCancellingAutoMerge" size="sm" inline class="gl-mr-1" />
             {{ cancelButtonText }}
           </a>
         </h4>
@@ -200,7 +200,7 @@ export default {
               data-testid="removeSourceBranchButton"
               @click.prevent="removeSourceBranch"
             >
-              <gl-loading-icon v-if="isRemovingSourceBranch" inline class="gl-mr-1" />
+              <gl-loading-icon v-if="isRemovingSourceBranch" size="sm" inline class="gl-mr-1" />
               {{ s__('mrWidget|Delete source branch') }}
             </a>
           </p>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue

@@ -63,7 +63,7 @@ export default {
         size="small"
         @click="refreshWidget"
       >
-        <gl-loading-icon v-if="isRefreshing" :inline="true" />
+        <gl-loading-icon v-if="isRefreshing" size="sm" :inline="true" />
         {{ s__('mrWidget|Refresh') }}
       </gl-button>
     </div>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

@@ -208,7 +208,7 @@ export default {
           </gl-button>
         </p>
         <p v-if="shouldShowSourceBranchRemoving">
-          <gl-loading-icon :inline="true" />
+          <gl-loading-icon size="sm" :inline="true" />
           <span> {{ s__('mrWidget|The source branch is being deleted') }} </span>
         </p>
       </section>

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue

@@ -204,7 +204,7 @@ export default {
         @click="$emit('toggle-sidebar')"
       >
         <gl-icon name="user" />
-        <gl-loading-icon v-if="isUpdating" />
+        <gl-loading-icon v-if="isUpdating" size="sm" />
       </div>
       <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
         <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
@@ -270,12 +270,12 @@ export default {
           <p v-else-if="userListEmpty" class="gl-mx-5 gl-my-4">
             {{ __('No Matching Results') }}
           </p>
-          <gl-loading-icon v-else />
+          <gl-loading-icon v-else size="sm" />
         </div>
       </gl-dropdown>
     </div>
 
-    <gl-loading-icon v-if="isUpdating" :inline="true" />
+    <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
     <div
       v-else-if="!isDropdownShowing"
       class="hide-collapsed value gl-m-0"

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -81,7 +81,7 @@ export default {
     <template v-if="sidebarCollapsed">
       <div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">
         <gl-icon name="status" />
-        <gl-loading-icon v-if="isUpdating" />
+        <gl-loading-icon v-if="isUpdating" size="sm" />
       </div>
       <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
         <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
@@ -120,7 +120,7 @@ export default {
         @handle-updating="handleUpdating"
       />
 
-      <gl-loading-icon v-if="isUpdating" :inline="true" />
+      <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
       <p
         v-else-if="!isDropdownShowing"
         class="value gl-m-0"

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue

@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div class="nothing-here-block">
-    <gl-loading-icon v-if="is($options.STATE_LOADING)" />
+    <gl-loading-icon v-if="is($options.STATE_LOADING)" size="sm" />
     <template v-else>
       <gl-alert
         v-show="is($options.STATE_ERRORED)"

app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue

@@ -36,7 +36,7 @@ export default {
     data-toggle="dropdown"
     aria-expanded="false"
   >
-    <gl-loading-icon v-show="isLoading" :inline="true" />
+    <gl-loading-icon v-show="isLoading" size="sm" :inline="true" />
     <slot v-if="$slots.default"></slot>
     <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
     <gl-icon

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

@@ -85,7 +85,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-loading-icon v-if="loading" :inline="true" />
+    <gl-loading-icon v-if="loading" size="sm" :inline="true" />
     <gl-icon v-else-if="isSymlink" name="symlink" :size="size" use-deprecated-sizes />
     <svg v-else-if="!folder" :key="spriteHref" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue

@@ -189,7 +189,7 @@ export default {
         name="suggestions-list"
         :suggestions="preloadedSuggestions"
       ></slot>
-      <gl-loading-icon v-if="suggestionsLoading" />
+      <gl-loading-icon v-if="suggestionsLoading" size="sm" />
       <template v-else>
         <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
       </template>

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue

@@ -97,7 +97,7 @@ export default {
         {{ branch.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultBranches.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="branch in branches"

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue

@@ -101,7 +101,7 @@ export default {
         {{ emoji.value }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultEmojis.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="emoji in emojis"

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue

@@ -134,7 +134,7 @@ export default {
         {{ epic.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultEpics.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="epic in epics" :key="epic.id" :value="getValue(epic)">
           {{ epic.title }}

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue

@@ -103,7 +103,7 @@ export default {
         {{ iteration.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultIterations.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="iteration in iterations"

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue

@@ -102,7 +102,7 @@ export default {
         {{ milestone.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultMilestones.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="milestone in milestones"

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -111,7 +111,7 @@ export default {
     </div>
     <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div>
     <div v-else-if="isApplying" class="d-flex align-items-center text-secondary">
-      <gl-loading-icon class="d-flex-center mr-2" />
+      <gl-loading-icon size="sm" class="d-flex-center mr-2" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
     <div v-else-if="canApply && isBatched" class="d-flex align-items-center">

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

@@ -82,7 +82,7 @@ export default {
         <span class="attaching-file-message"></span>
         <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>
-        <gl-loading-icon inline />
+        <gl-loading-icon size="sm" inline />
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue

@@ -194,7 +194,7 @@ export default {
       <template v-if="selectedPlatform">
         <h5>
           {{ $options.i18n.architecture }}
-          <gl-loading-icon v-if="$apollo.loading" inline />
+          <gl-loading-icon v-if="$apollo.loading" size="sm" inline />
         </h5>
 
         <gl-dropdown class="gl-mb-3" :text="selectedArchitectureName">

app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue

@@ -81,7 +81,7 @@ export default {
         {{ templateText }}
       </span>
 
-      <gl-loading-icon v-if="isLoading" inline :label="loadingIconLabel" />
+      <gl-loading-icon v-if="isLoading" size="sm" inline :label="loadingIconLabel" />
       <clipboard-button v-else size="small" v-bind="clipboardProps" />
     </div>
   </div>

app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue

@@ -104,7 +104,7 @@ export default {
     <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
     <div class="title">
       {{ label }}
-      <gl-loading-icon v-if="isLoading" :inline="true" />
+      <gl-loading-icon v-if="isLoading" size="sm" :inline="true" />
       <div class="float-right">
         <button
           v-if="editable && !editing"

app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue

@@ -148,7 +148,7 @@ export default {
       @hide="handleDropdownHide"
     >
       <template #button-content
-        ><gl-loading-icon v-if="moveInProgress" class="gl-mr-3" />{{
+        ><gl-loading-icon v-if="moveInProgress" size="sm" class="gl-mr-3" />{{
           dropdownButtonTitle
         }}</template
       >

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue

@@ -108,7 +108,7 @@ export default {
         class="float-left d-flex align-items-center"
         @click="handleCreateClick"
       >
-        <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
+        <gl-loading-icon v-show="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
       <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue

@@ -26,7 +26,7 @@ export default {
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
-      <gl-loading-icon v-show="labelsSelectInProgress" inline />
+      <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
         variant="link"
         class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue

@@ -117,7 +117,7 @@ export default {
         data-testid="create-button"
         @click="createLabel"
       >
-        <gl-loading-icon v-if="labelCreateInProgress" :inline="true" class="mr-1" />
+        <gl-loading-icon v-if="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
       <gl-button

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue

@@ -26,7 +26,7 @@ export default {
   <div class="title hide-collapsed gl-mb-3">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
-      <gl-loading-icon v-show="labelsSelectInProgress" inline />
+      <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
         variant="link"
         class="float-right js-sidebar-dropdown-toggle"

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue

@@ -125,7 +125,7 @@ export default {
         @input="$emit('fetchGroups', $event)"
       />
     </template>
-    <gl-loading-icon v-if="isLoadingGroups" />
+    <gl-loading-icon v-if="isLoadingGroups" size="sm" />
     <template v-else>
       <gl-dropdown-item
         v-for="group in groups"

ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue

@@ -158,7 +158,7 @@ export default {
     </template>
     <template #suggestions>
       <template v-if="suggestionsLoading">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
       </template>
       <template v-else-if="hasSuggestions">
         <gl-filtered-search-suggestion

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

@@ -165,7 +165,7 @@ export default {
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">
-            <gl-loading-icon />
+            <gl-loading-icon size="sm" />
           </div>
         </div>
       </div>

ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue

@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div class="dropdown-assignees-list">
-    <div v-if="loading" class="dropdown-loading"><gl-loading-icon /></div>
+    <div v-if="loading" class="dropdown-loading"><gl-loading-icon size="sm" /></div>
     <list-filter @onSearchInput="handleSearch" />
     <list-content
       v-if="!loading"

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

@@ -131,7 +131,7 @@ export default {
             />
           </div>
           <div class="dropdown-content"></div>
-          <div class="dropdown-loading"><gl-loading-icon /></div>
+          <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
         </div>
       </div>
     </div>

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -158,7 +158,7 @@ export default {
     <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
     <div class="title">
       {{ label }}
-      <gl-loading-icon v-if="dateSaveInProgress" :inline="true" />
+      <gl-loading-icon v-if="dateSaveInProgress" size="sm" :inline="true" />
       <div class="float-right d-flex">
         <gl-icon
           ref="epicDatePopover"

ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue

@@ -80,7 +80,7 @@ export default {
 <template>
   <gl-tab :title="s__('Incident|Metrics')" data-testid="metrics-tab">
     <div v-if="isLoadingMetricImages">
-      <gl-loading-icon class="gl-p-5" />
+      <gl-loading-icon class="gl-p-5" size="sm" />
     </div>
     <gl-modal
       modal-id="upload-metric-modal"

ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue

@@ -88,7 +88,7 @@ export default {
 
 <template>
   <div class="list-section">
-    <gl-loading-icon v-if="loading" />
+    <gl-loading-icon v-if="loading" size="sm" />
     <div v-else-if="rotations.length === 0 && !loading" class="gl-clearfix">
       <span
         class="details-cell gl-display-flex gl-justify-content-space-between gl-align-items-center gl-pl-3"

ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue

@@ -93,7 +93,7 @@ export default {
         <span class="h5">{{ numberOfFeatureFlags }}</span>
       </h3>
     </div>
-    <gl-loading-icon v-if="loading" class="gl-my-3" />
+    <gl-loading-icon v-if="loading" size="sm" class="gl-my-3" />
     <ul v-else class="content-list related-items-list">
       <li
         v-for="flag in featureFlags"

ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue

@@ -90,6 +90,6 @@ export default {
       <span class="no-value">{{ __('None') }}</span>
     </div>
 
-    <gl-loading-icon v-if="isFetching" />
+    <gl-loading-icon v-if="isFetching" size="sm" />
   </div>
 </template>

ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue

@@ -121,7 +121,7 @@ export default {
       {{ $options.noIteration.title }}
     </gl-dropdown-item>
     <gl-dropdown-divider />
-    <gl-loading-icon v-if="$apollo.queries.iterations.loading" />
+    <gl-loading-icon v-if="$apollo.queries.iterations.loading" size="sm" />
     <template v-else-if="!glFeatures.iterationCadences">
       <gl-dropdown-item
         v-for="iterationItem in iterations"

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -148,7 +148,7 @@ export default {
     <div ref="status" v-gl-tooltip.left.viewport="statusTooltip" class="sidebar-collapsed-icon">
       <gl-icon name="status-health" :size="14" />
 
-      <gl-loading-icon v-if="isFetching" />
+      <gl-loading-icon v-if="isFetching" size="sm" />
       <p v-else class="collapse-truncated-title gl-px-2">{{ statusText }}</p>
     </div>
 
@@ -211,7 +211,7 @@ export default {
         </gl-dropdown>
       </div>
 
-      <gl-loading-icon v-if="isFetching" :inline="true" />
+      <gl-loading-icon v-if="isFetching" size="sm" :inline="true" />
       <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !status }">
         <span v-if="status" class="text-plain gl-font-weight-bold">{{ statusText }}</span>
         <span v-else>{{ $options.i18n.noneText }}</span>