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".

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".
e1e7df7c · Dave Pisek · 0538f6e2 · e1e7df7c · e1e7df7c · e1e7df7c
Commit e1e7df7c authored Jun 29, 2021 by Dave Pisek
109 changed files
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/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">

--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/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') }}

--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/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>

--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/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>

--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/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" />

--- a/app/assets/javascripts/boards/components/board_list_deprecated.vue
+++ b/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>

--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/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 />

--- a/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
+++ b/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 />

--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/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"

--- a/app/assets/javascripts/boards/components/project_select_deprecated.vue
+++ b/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>

--- a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
+++ b/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"

--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
+++ b/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

--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
+++ b/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

--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
+++ b/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

--- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
+++ b/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">

--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/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>

--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/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>

--- a/app/assets/javascripts/environments/components/deploy_board.vue
+++ b/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">

--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/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"

--- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
+++ b/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"

--- a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
+++ b/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"

--- a/app/assets/javascripts/group_settings/components/shared_runners_form.vue
+++ b/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">

--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/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>
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/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>

--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/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>
--- a/app/assets/javascripts/ide/components/terminal/terminal.vue
+++ b/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

--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/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"

--- a/app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue
+++ b/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>

--- a/app/assets/javascripts/milestones/components/milestone_combobox.vue
+++ b/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">

--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/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>

--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/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"

--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/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"

--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
+++ b/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>

--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/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')"

--- a/app/assets/javascripts/notifications/components/custom_notifications_modal.vue
+++ b/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>

--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/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>

--- a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue
+++ b/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>


--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/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 }}

--- a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
+++ b/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>
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/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"

--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
+++ b/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"

--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
+++ b/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 }}

--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
+++ b/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"

--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
+++ b/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 }}

--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/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"

--- a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
+++ b/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"

--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
+++ b/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>


--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/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

--- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
+++ b/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">

--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/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"

--- a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
+++ b/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

--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/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"

--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/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">

--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
+++ b/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"

--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
+++ b/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>

--- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
+++ b/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

--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/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">

--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/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"

--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/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>
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/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>

--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/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>

--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
+++ b/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>

--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/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"

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/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">

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/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>

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/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>

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/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>

--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
+++ b/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)"

--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/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

--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/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 }" />

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/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>

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
+++ b/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 }}

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/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">

--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/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">

--- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
+++ b/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">

--- a/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue
+++ b/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>

--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue
+++ b/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
      >

--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/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">

--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
+++ b/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"

--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
+++ b/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

--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
+++ b/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"

--- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue
+++ b/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"

--- a/ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue
+++ b/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

--- a/ee/app/assets/javascripts/boards/components/assignee_select.vue
+++ b/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>

--- a/ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue
+++ b/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"

--- a/ee/app/assets/javascripts/boards/components/milestone_select.vue
+++ b/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>

--- a/ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue
+++ b/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"

--- a/ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue
+++ b/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"

--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
+++ b/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"

--- a/ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue
+++ b/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"

--- a/ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue
+++ b/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>
--- a/ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
+++ b/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"

--- a/ee/app/assets/javascripts/sidebar/components/status/status.vue
+++ b/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>

--- a/ee/app/assets/javascripts/sidebar/components/weight/weight.vue
+++ b/ee/app/assets/javascripts/sidebar/components/weight/weight.vue
@@ -146,7 +146,7 @@ export default {
      @click="onCollapsedClick"
    >
      <gl-icon :size="16" name="weight" />
-      <gl-loading-icon v-if="fetching" class="js-weight-collapsed-loading-icon" />
+      <gl-loading-icon v-if="fetching" size="sm" class="js-weight-collapsed-loading-icon" />
      <span v-else class="js-weight-collapsed-weight-label">
        {{ collapsedWeightLabel
        }}<template v-if="weight > $options.maxDisplayWeight">&hellip;</template>
@@ -154,7 +154,12 @@ export default {
    </div>
    <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
      {{ s__('Sidebar|Weight') }}
-      <gl-loading-icon v-if="fetching || loading" :inline="true" class="js-weight-loading-icon" />
+      <gl-loading-icon
+        v-if="fetching || loading"
+        size="sm"
+        :inline="true"
+        class="js-weight-loading-icon"
+      />
      <a
        v-if="editable"
        class="float-right edit-link js-weight-edit-link"

--- a/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue
+++ b/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue
@@ -181,7 +181,7 @@ export default {
          class="btn-blank sidebar-collapsed-icon"
          @click="handleTodoButtonClick"
        >
-          <gl-loading-icon v-if="todoUpdateInProgress" />
+          <gl-loading-icon v-if="todoUpdateInProgress" size="sm" />
          <gl-icon v-else :name="todoIcon" :class="{ 'todo-undone': isTodoPending }" />
        </button>
      </div>

--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
@@ -86,7 +86,7 @@ export default {
    <template #modal-cancel>{{ s__('Cancel') }}</template>

    <template #modal-ok>
-      <gl-loading-icon v-if="isApproving" inline />
+      <gl-loading-icon v-if="isApproving" size="sm" inline />
      {{ s__('Approve') }}
    </template>
  </gl-modal>

--- a/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue
@@ -278,7 +278,7 @@ export default {
        <p v-else-if="epicListNotValid" class="gl-mx-5 gl-my-4">
          {{ $options.i18n.noMatch }}
        </p>
-        <gl-loading-icon v-else />
+        <gl-loading-icon v-else size="sm" />
      </gl-dropdown>
    </div>


--- a/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
@@ -86,7 +86,11 @@ export default {
    <span class="js-license-name">{{ license.name }}</span>
    <div class="float-right">
      <div class="d-flex">
-        <gl-loading-icon v-if="loading" class="js-loading-icon d-flex align-items-center mr-2" />
+        <gl-loading-icon
+          v-if="loading"
+          size="sm"
+          class="js-loading-icon d-flex align-items-center mr-2"
+        />
        <gl-dropdown
          :text="dropdownText"
          :disabled="loading"

--- a/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
@@ -76,7 +76,7 @@ export default {
 };
 </script>
 <template>
-  <gl-loading-icon v-if="showLoadingSpinner" />
+  <gl-loading-icon v-if="showLoadingSpinner" size="sm" />
  <div v-else class="license-management">
    <delete-confirmation-modal v-if="isAdmin" />


--- a/ee/app/assets/javascripts/vulnerabilities/components/header.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/header.vue
@@ -265,7 +265,7 @@ export default {
        class="detail-page-header-body align-items-center"
        data-testid="vulnerability-detail-body"
      >
-        <gl-loading-icon v-if="isLoadingVulnerability" class="mr-2" />
+        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="mr-2" />
        <gl-badge v-else class="gl-mr-4 text-capitalize" :variant="stateVariant">
          {{ vulnerability.state }}
        </gl-badge>
@@ -281,7 +281,7 @@ export default {

      <div class="detail-page-header-actions align-items-center">
        <label class="mb-0 mx-2">{{ __('Status') }}</label>
-        <gl-loading-icon v-if="isLoadingVulnerability" class="d-inline" />
+        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="d-inline" />
        <vulnerability-state-dropdown
          v-else
          :initial-state="vulnerability.state"

--- a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
@@ -171,7 +171,7 @@ export default {
    class="m-3"
  >
    <div v-safe-html="noteHtml" class="md">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
    </div>

    <template #right-content>

--- a/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue
@@ -95,7 +95,7 @@ export default {
        <time-ago-tooltip ref="timeAgo" :time="time" />
      </template>
      <template #user>
-        <gl-loading-icon v-if="isLoadingUser" class="d-inline ml-1" />
+        <gl-loading-icon v-if="isLoadingUser" class="d-inline ml-1" size="sm" />
        <user-avatar-link
          v-else-if="user"
          :link-href="user.user_path"