Use gitlab-ui loading icon

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

 <script>
 import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import Item from './item.vue';
 export default {
   components: {
-    LoadingIcon,
     Item,
     Icon,
   },
@@ -76,10 +74,10 @@ export default {
       </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
-      <loading-icon
+      <gl-loading-icon
         v-if="isLoading"
+        :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
-        size="2"
       />
       <ul
         v-else

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

 <script>
 import { mapActions } from 'vuex';
-import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
-  components: {
-    LoadingIcon,
-  },
   props: {
     message: {
       type: Object,
@@ -59,7 +55,7 @@ export default {
         @click.stop.prevent="clickAction"
       >
         {{ message.actionText }}
-        <loading-icon
+        <gl-loading-icon
           v-show="isLoading"
           inline
         />

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

 <script>
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 export default {
   components: {
     DropdownButton,
-    LoadingIcon,
   },
   props: {
     data: {
@@ -102,9 +100,9 @@ export default {
         ></i>
       </div>
       <div class="dropdown-content">
-        <loading-icon
+        <gl-loading-icon
           v-if="showLoading"
-          size="2"
+          :size="2"
         />
         <ul v-else>
           <li

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

 <script>
 import { mapActions } from 'vuex';
-import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Stage from './stage.vue';
 export default {
   components: {
-    LoadingIcon,
     Stage,
   },
   props: {
@@ -26,10 +24,10 @@ export default {
 <template>
   <div>
-    <loading-icon
+    <gl-loading-icon
       v-if="loading && !stages.length"
+      :size="2"
       class="prepend-top-default"
-      size="2"
     />
     <template v-else>
       <stage

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

@@ -2,7 +2,6 @@
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
-import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Item from './item.vue';
 export default {
@@ -12,7 +11,6 @@ export default {
   components: {
     Icon,
     CiIcon,
-    LoadingIcon,
     Item,
   },
   props: {
@@ -96,7 +94,7 @@ export default {
       v-show="!stage.isCollapsed"
       class="card-body"
     >
-      <loading-icon
+      <gl-loading-icon
         v-if="showLoadingIcon"
       />
       <template v-else>

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

@@ -3,7 +3,6 @@ import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
@@ -14,7 +13,6 @@ const SEARCH_TYPES = [
 export default {
   components: {
-    LoadingIcon,
     TokenedInput,
     Item,
     Icon,
@@ -98,10 +96,10 @@ export default {
       </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
-      <loading-icon
+      <gl-loading-icon
         v-if="isLoading"
+        :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
-        size="2"
       />
       <template v-else>
         <ul

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

@@ -2,7 +2,6 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { sprintf, __ } from '../../../locale';
-import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
@@ -12,7 +11,6 @@ import JobsList from '../jobs/list.vue';
 export default {
   components: {
-    LoadingIcon,
     Icon,
     CiIcon,
     Tabs,
@@ -50,10 +48,10 @@ export default {
 <template>
   <div class="ide-pipeline">
-    <loading-icon
+    <gl-loading-icon
       v-if="showLoadingIcon"
+      :size="2"
       class="prepend-top-default"
-      size="2"
     />
     <template v-else-if="latestPipeline !== null">
       <header

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

@@ -3,14 +3,12 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { Manager } from 'smooshpack';
 import { listen } from 'codesandbox-api';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Navigator from './navigator.vue';
 import { packageJsonPath } from '../../constants';
 import { createPathWithExt } from '../../utils';
 export default {
   components: {
-    LoadingIcon,
     Navigator,
   },
   data() {
@@ -177,9 +175,9 @@ export default {
         {{ s__('IDE|Get started with Live Preview') }}
       </a>
     </div>
-    <loading-icon
+    <gl-loading-icon
       v-else
-      size="2"
+      :size="2"
       class="align-self-center mt-auto mb-auto"
     />
   </div>

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

 <script>
 import { listen } from 'codesandbox-api';
 import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 export default {
   components: {
     Icon,
-    LoadingIcon,
   },
   props: {
     manager: {
@@ -138,7 +136,7 @@ export default {
         class="ide-navigator-location form-control bg-white"
         readonly
       />
-      <loading-icon
+      <gl-loading-icon
         v-if="loading"
         class="position-absolute ide-preview-loading-icon"
       />

app/assets/javascripts/jobs/components/header.vue

 <script>
 import ciHeader from '../../vue_shared/components/header_ci_component.vue';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import callout from '../../vue_shared/components/callout.vue';
 export default {
   name: 'JobHeaderSection',
   components: {
     ciHeader,
-    loadingIcon,
     callout,
   },
   props: {
@@ -82,9 +80,9 @@ export default {
         :should-render-triggered-label="jobStarted"
         item-name="Job"
       />
-      <loading-icon
+      <gl-loading-icon
         v-if="isLoading"
-        size="2"
+        :size="2"
         class="prepend-top-default append-bottom-default"
       />
     </div>

app/assets/javascripts/jobs/components/sidebar_details_block.vue

 <script>
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -9,7 +8,6 @@ export default {
   name: 'SidebarDetailsBlock',
   components: {
     DetailRow,
-    LoadingIcon,
     Icon,
   },
   mixins: [timeagoMixin],
@@ -232,10 +230,10 @@ export default {
         </div>
       </div>
     </template>
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
+      :size="2"
       class="prepend-top-10"
-      size="2"
     />
   </div>
 </template>

app/assets/javascripts/notes/components/note_actions.vue

@@ -7,7 +7,6 @@ import editSvg from 'icons/_icon_pencil.svg';
 import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
 import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
 import ellipsisSvg from 'icons/_ellipsis_v.svg';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 export default {
@@ -15,9 +14,6 @@ export default {
   directives: {
     tooltip,
   },
-  components: {
-    loadingIcon,
-  },
   props: {
     authorId: {
       type: Number,
@@ -153,9 +149,9 @@ export default {
             v-else
             v-html="resolveDiscussionSvg"></div>
         </template>
-        <loading-icon
+        <gl-loading-icon
           v-else
-          :inline="true"
+          inline
         />
       </button>
     </div>
@@ -172,7 +168,7 @@ export default {
         href="#"
         title="Add reaction"
       >
-        <loading-icon :inline="true" />
+        <gl-loading-icon inline/>
         <span
           class="link-highlight award-control-icon-neutral"
           v-html="emojiSmiling">

app/assets/javascripts/notes/components/notes_app.vue

@@ -10,7 +10,6 @@ import systemNote from '../../vue_shared/components/notes/system_note.vue';
 import commentForm from './comment_form.vue';
 import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
 import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
 export default {
@@ -20,7 +19,6 @@ export default {
     noteableDiscussion,
     systemNote,
     commentForm,
-    loadingIcon,
     placeholderNote,
     placeholderSystemNote,
   },

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

 <script>
 import _ from 'underscore';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import StageColumnComponent from './stage_column_component.vue';
 export default {
   components: {
     StageColumnComponent,
-    LoadingIcon,
   },
   props: {
     isLoading: {
@@ -59,9 +57,9 @@ export default {
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
       <div class="text-center">
-        <loading-icon
+        <gl-loading-icon
           v-if="isLoading"
-          size="3"
+          :size="3"
         />
       </div>

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

 <script>
 import ciHeader from '../../vue_shared/components/header_ci_component.vue';
 import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   name: 'PipelineHeaderSection',
   components: {
     ciHeader,
-    loadingIcon,
   },
   props: {
     pipeline: {
@@ -89,9 +87,9 @@ export default {
       item-name="Pipeline"
       @actionClicked="postAction"
     />
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
-      size="2"
+      :size="2"
       class="prepend-top-default append-bottom-default"
     />
   </div>

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

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

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

 <script>
 import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import icon from '../../vue_shared/components/icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -9,7 +8,6 @@ export default {
     tooltip,
   },
   components: {
-    loadingIcon,
     icon,
   },
   props: {
@@ -60,7 +58,7 @@ export default {
         class="fa fa-caret-down"
         aria-hidden="true">
       </i>
-      <loading-icon v-if="isLoading" />
+      <gl-loading-icon v-if="isLoading" />
     </button>
     <ul class="dropdown-menu dropdown-menu-right">

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

@@ -18,14 +18,12 @@ import Flash from '../../flash';
 import axios from '../../lib/utils/axios_utils';
 import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
-import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import JobComponent from './graph/job_component.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { PIPELINES_TABLE } from '../constants';
 export default {
   components: {
-    LoadingIcon,
     Icon,
     JobComponent,
   },
@@ -191,7 +189,7 @@ export default {
       class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
       aria-labelledby="stageDropdown"
     >
-      <loading-icon v-if="isLoading"/>
+      <gl-loading-icon v-if="isLoading"/>
       <ul
         v-else
         class="js-builds-dropdown-list scrollable-menu"

app/assets/javascripts/pipelines/mixins/pipelines.js

@@ -4,7 +4,6 @@ import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import EmptyState from '../components/empty_state.vue';
 import SvgBlankState from '../components/blank_state.vue';
-import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
 import { CANCEL_REQUEST } from '../constants';
@@ -14,7 +13,6 @@ export default {
     PipelinesTableComponent,
     SvgBlankState,
     EmptyState,
-    LoadingIcon,
   },
   data() {
     return {

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js

 import _ from 'underscore';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
@@ -9,7 +8,6 @@ import store from '../store';
 export default {
   store,
   components: {
-    LoadingIcon,
     DropdownButton,
     DropdownSearchInput,
     DropdownHiddenInput,