Use gitlab-ui loading icon

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

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 export default {
   name: 'Badge',
   components: {
     Icon,
-    LoadingIcon,
     Tooltip,
   },
   directives: {
@@ -80,7 +78,7 @@ export default {
       />
     </a>
-    <loading-icon
+    <gl-loading-icon
       v-show="isLoading"
       :inline="true"
     />

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

@@ -4,7 +4,6 @@ import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
@@ -15,7 +14,6 @@ export default {
   components: {
     Badge,
     LoadingButton,
-    LoadingIcon,
   },
   props: {
     isEditing: {
@@ -207,7 +205,7 @@ export default {
         :link-url="renderedLinkUrl"
       />
       <p v-show="isRendering">
-        <loading-icon
+        <gl-loading-icon
           :inline="true"
         />
       </p>

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

 <script>
 import { mapState } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import BadgeListRow from './badge_list_row.vue';
 import { GROUP_BADGE } from '../constants';
@@ -8,7 +7,6 @@ export default {
   name: 'BadgeList',
   components: {
     BadgeListRow,
-    LoadingIcon,
   },
   computed: {
     ...mapState(['badges', 'isLoading', 'kind']),
@@ -31,10 +29,10 @@ export default {
         class="badge badge-pill"
       >{{ badges.length }}</span>
     </div>
-    <loading-icon
+    <gl-loading-icon
       v-show="isLoading"
+      :size="2"
       class="card-body"
-      size="2"
     />
     <div
       v-if="hasNoBadges"

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

@@ -2,7 +2,6 @@
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import { PROJECT_BADGE } from '../constants';
 import Badge from './badge.vue';
@@ -11,7 +10,6 @@ export default {
   components: {
     Badge,
     Icon,
-    LoadingIcon,
   },
   props: {
     badge: {
@@ -79,7 +77,7 @@ export default {
             name="remove"
           />
         </button>
-        <loading-icon
+        <gl-loading-icon
           v-show="badge.isDeleting"
           :inline="true"
         />

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

@@ -3,7 +3,6 @@ import Sortable from 'sortablejs';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 const Store = gl.issueBoards.BoardsStore;
@@ -12,7 +11,6 @@ export default {
   components: {
     boardCard,
     boardNewIssue,
-    loadingIcon,
   },
   props: {
     groupId: {
@@ -217,7 +215,7 @@ export default {
       v-if="loading"
       class="board-list-loading text-center"
       aria-label="Loading issues">
-      <loading-icon />
+      <gl-loading-icon />
     </div>
     <board-new-issue
       v-if="list.type !== 'closed' && showIssueForm"
@@ -245,7 +243,7 @@ export default {
         v-if="showCount"
         class="board-list-count text-center"
         data-issue-id="-1">
-        <loading-icon
+        <gl-loading-icon
           v-show="list.loadingMore"
           label="Loading more issues"
         />

app/assets/javascripts/boards/components/modal/index.vue

 <script>
   /* global ListIssue */
   import { urlParamsToObject } from '~/lib/utils/common_utils';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import ModalHeader from './header.vue';
   import ModalList from './list.vue';
   import ModalFooter from './footer.vue';
@@ -14,7 +13,6 @@
       ModalHeader,
       ModalList,
       ModalFooter,
-      loadingIcon,
     },
     props: {
       newIssuePath: {
@@ -167,7 +165,7 @@
         class="add-issues-list text-center"
       >
         <div class="add-issues-list-loading">
-          <loading-icon />
+          <gl-loading-icon />
         </div>
       </section>
       <modal-footer/>

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

@@ -2,14 +2,10 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import eventHub from '../eventhub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import Api from '../../api';
 export default {
   name: 'BoardProjectSelect',
-  components: {
-    loadingIcon,
-  },
   props: {
     groupId: {
       type: Number,
@@ -119,7 +115,7 @@ export default {
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">
-          <loading-icon />
+          <gl-loading-icon />
         </div>
       </div>
     </div>

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -76,10 +76,10 @@
 <template>
   <div class="content-list pipelines">
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
-      size="3"
+      :size="3"
       class="prepend-top-20"
     />

app/assets/javascripts/commons/gitlab_ui.js

 import Vue from 'vue';
 import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
 import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
+import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon';
 import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
 import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
 Vue.component('gl-progress-bar', progressBar);
 Vue.component('gl-ui-modal', modal);
+Vue.component('gl-loading-icon', loadingIcon);
 Vue.directive('gl-modal', dModal);
 Vue.directive('gl-tooltip', dTooltip);

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

 <script>
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import eventHub from '../eventhub';
 export default {
-  components: {
-    loadingIcon,
-  },
   props: {
     deployKey: {
       type: Object,
@@ -45,7 +41,7 @@ export default {
     class="btn"
     @click="doAction">
     <slot></slot>
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
       :inline="true"
     />

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

 <script>
 import { s__ } from '~/locale';
 import Flash from '~/flash';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import eventHub from '../eventhub';
 import DeployKeysService from '../service';
@@ -11,7 +10,6 @@ import KeysPanel from './keys_panel.vue';
 export default {
   components: {
     KeysPanel,
-    LoadingIcon,
     NavigationTabs,
   },
   props: {
@@ -114,10 +112,10 @@ export default {
 <template>
   <div class="append-bottom-default deploy-keys">
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading && !hasKeys"
       :label="s__('DeployKeys|Loading deploy keys')"
-      size="2"
+      :size="2"
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">

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

@@ -4,7 +4,6 @@ import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import eventHub from '../../notes/event_hub';
-import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import CompareVersions from './compare_versions.vue';
 import ChangedFiles from './changed_files.vue';
 import DiffFile from './diff_file.vue';
@@ -15,7 +14,6 @@ export default {
   name: 'DiffsApp',
   components: {
     Icon,
-    LoadingIcon,
     CompareVersions,
     ChangedFiles,
     DiffFile,
@@ -168,7 +166,7 @@ export default {
       v-if="isLoading"
       class="loading"
     >
-      <loading-icon />
+      <gl-loading-icon />
     </div>
     <div
       v-else

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

@@ -3,7 +3,6 @@ import { mapActions, mapGetters } from 'vuex';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
@@ -11,7 +10,6 @@ export default {
   components: {
     DiffFileHeader,
     DiffContent,
-    LoadingIcon,
   },
   props: {
     file: {
@@ -144,7 +142,7 @@ export default {
       :class="{ hidden: isCollapsed || file.tooLarge }"
       :diff-file="file"
     />
-    <loading-icon
+    <gl-loading-icon
       v-if="showLoadingIcon"
       class="diff-content loading"
     />

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

 <script>
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tablePagination from '../../vue_shared/components/table_pagination.vue';
   import environmentTable from '../components/environments_table.vue';
   export default {
     components: {
       environmentTable,
-      loadingIcon,
       tablePagination,
     },
     props: {
@@ -42,11 +40,11 @@
 <template>
   <div class="environments-container">
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
+      :size="3"
       class="prepend-top-default"
       label="Loading environments"
-      size="3"
     />
     <slot name="emptyState"></slot>

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

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 export default {
@@ -9,7 +8,6 @@ export default {
     tooltip,
   },
   components: {
-    loadingIcon,
     Icon,
   },
   props: {
@@ -67,7 +65,7 @@ export default {
           aria-hidden="true"
         >
         </i>
-        <loading-icon v-if="isLoading" />
+        <gl-loading-icon v-if="isLoading" />
       </span>
     </button>

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

@@ -9,12 +9,10 @@ import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '../event_hub';
-import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   components: {
     Icon,
-    LoadingIcon,
   },
   directives: {
@@ -70,6 +68,6 @@ export default {
       v-else
       name="redo"/>
-    <loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" />
   </button>
 </template>

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

@@ -2,13 +2,11 @@
 /**
  * Render environments table.
  */
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import environmentItem from './environment_item.vue';
 export default {
   components: {
     environmentItem,
-    loadingIcon,
   },
   props: {
@@ -97,7 +95,7 @@ export default {
         <div
           v-if="model.isLoadingFolderContent"
           :key="`loading-item-${i}`">
-          <loading-icon size="2" />
+          <gl-loading-icon :size="2" />
         </div>
         <template v-else>

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -13,7 +13,6 @@ import eventHub from '../event_hub';
 import EnvironmentsStore from '../stores/environments_store';
 import EnvironmentsService from '../services/environments_service';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import environmentTable from '../components/environments_table.vue';
 import tabs from '../../vue_shared/components/navigation_tabs.vue';
@@ -24,7 +23,6 @@ export default {
   components: {
     environmentTable,
     container,
-    loadingIcon,
     tabs,
     tablePagination,
   },

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import AccessorUtilities from '~/lib/utils/accessor';
 import eventHub from '../event_hub';
 import store from '../store/';
@@ -13,7 +12,6 @@ import frequentItemsMixin from './frequent_items_mixin';
 export default {
   store,
   components: {
-    LoadingIcon,
     FrequentItemsSearchInput,
     FrequentItemsList,
   },
@@ -98,11 +96,11 @@ export default {
     <frequent-items-search-input
       :namespace="namespace"
     />
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoadingItems"
       :label="translations.loadingMessage"
+      :size="2"
       class="loading-animation prepend-top-20"
-      size="2"
     />
     <div
       v-if="!isLoadingItems && !hasSearchQuery"

app/assets/javascripts/groups/components/app.vue

@@ -3,7 +3,6 @@
 import $ from 'jquery';
 import { s__, sprintf } from '~/locale';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { HIDDEN_CLASS } from '~/lib/utils/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
@@ -15,7 +14,6 @@ import groupsComponent from './groups.vue';
 export default {
   components: {
-    loadingIcon,
     DeprecatedModal,
     groupsComponent,
   },
@@ -241,11 +239,11 @@ export default {
 <template>
   <div>
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
       :label="s__('GroupsTree|Loading groups')"
+      :size="2"
       class="loading-animation prepend-top-20"
-      size="2"
     />
     <groups-component
       v-if="!isLoading"