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"

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,

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue

@@ -126,7 +126,7 @@ export default {
           </ul>
         </div>
         <div class="dropdown-loading">
-          <loading-icon />
+          <gl-loading-icon />
         </div>
       </div>
     </div>

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue

@@ -187,7 +187,7 @@ export default {
           </ul>
         </div>
         <div class="dropdown-loading">
-          <loading-icon />
+          <gl-loading-icon />
         </div>
       </div>
     </div>

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue

@@ -100,7 +100,7 @@ export default {
           </ul>
         </div>
         <div class="dropdown-loading">
-          <loading-icon />
+          <gl-loading-icon />
         </div>
       </div>
     </div>

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

 <script>
 import Visibility from 'visibilityjs';
 import ciIcon from '~/vue_shared/components/ci_icon.vue';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Poll from '~/lib/utils/poll';
 import Flash from '~/flash';
 import { s__, sprintf } from '~/locale';
@@ -14,7 +13,6 @@ export default {
   },
   components: {
     ciIcon,
-    loadingIcon,
   },
   props: {
     endpoint: {
@@ -100,10 +98,10 @@ export default {
 </script>
 <template>
   <div class="ci-status-link">
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
+      :size="3"
       label="Loading pipeline status"
-      size="3"
     />
     <a
       v-else

app/assets/javascripts/registry/components/app.vue

 <script>
   import { mapGetters, mapActions } from 'vuex';
   import Flash from '../../flash';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import store from '../stores';
   import collapsibleContainer from './collapsible_container.vue';
   import { errorMessages, errorMessagesTypes } from '../constants';
@@ -10,7 +9,6 @@
     name: 'RegistryListApp',
     components: {
       collapsibleContainer,
-      loadingIcon,
     },
     props: {
       endpoint: {
@@ -42,9 +40,9 @@
 </script>
 <template>
   <div>
-    <loading-icon
+    <gl-loading-icon
       v-if="isLoading"
-      size="3"
+      :size="3"
     />
 
     <collapsible-container

app/assets/javascripts/registry/components/collapsible_container.vue

@@ -2,7 +2,6 @@
   import { mapActions } from 'vuex';
   import Flash from '../../flash';
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   import tableRegistry from './table_registry.vue';
   import { errorMessages, errorMessagesTypes } from '../constants';
@@ -12,7 +11,6 @@
     name: 'CollapsibeContainerRegisty',
     components: {
       clipboardButton,
-      loadingIcon,
       tableRegistry,
     },
     directives: {
@@ -107,10 +105,10 @@
       </div>
     </div>
 
-    <loading-icon
+    <gl-loading-icon
       v-if="repo.isLoading"
+      :size="2"
       class="append-bottom-20"
-      size="2"
     />
 
     <div

app/assets/javascripts/reports/components/summary_row.vue

 <script>
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
 
 /**
@@ -15,7 +14,6 @@ export default {
   name: 'ReportSummaryRow',
   components: {
     CiIcon,
-    LoadingIcon,
     Popover,
   },
   props: {
@@ -46,7 +44,7 @@ export default {
 <template>
   <div class="report-block-list-issue report-block-list-issue-parent">
     <div class="report-block-list-icon append-right-10 prepend-left-5">
-      <loading-icon
+      <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"
       />

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

 <script>
   import { __, n__, sprintf } from '~/locale';
   import tooltip from '~/vue_shared/directives/tooltip';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
   export default {
@@ -9,7 +8,6 @@
       tooltip,
     },
     components: {
-      loadingIcon,
       userAvatarImage,
     },
     props: {
@@ -93,7 +91,7 @@
         aria-hidden="true"
       >
       </i>
-      <loading-icon
+      <gl-loading-icon
         v-if="loading"
         class="js-participants-collapsed-loading-icon"
       />
@@ -105,7 +103,7 @@
       </span>
     </div>
     <div class="title hide-collapsed">
-      <loading-icon
+      <gl-loading-icon
         v-if="loading"
         :inline="true"
         class="js-participants-expanded-loading-icon"

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

@@ -3,7 +3,6 @@ import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 
 const MARK_TEXT = __('Mark todo as done');
 const TODO_TEXT = __('Add todo');
@@ -14,7 +13,6 @@ export default {
   },
   components: {
     Icon,
-    LoadingIcon,
   },
   props: {
     issuableId: {
@@ -90,7 +88,7 @@ export default {
     >
       {{ buttonLabel }}
     </span>
-    <loading-icon
+    <gl-loading-icon
       v-show="isActionActive"
       :inline="true"
     />

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

 <script>
   import ciIcon from '../../vue_shared/components/ci_icon.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
     components: {
       ciIcon,
-      loadingIcon,
     },
     props: {
       status: {
@@ -37,7 +35,7 @@
       v-if="isLoading"
       class="mr-widget-icon"
     >
-      <loading-icon />
+      <gl-loading-icon />
     </div>
 
     <ci-icon

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

 <script>
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import eventHub from '../../event_hub';
   import statusIcon from '../mr_widget_status_icon.vue';
 
@@ -7,7 +6,6 @@
     name: 'MRWidgetAutoMergeFailed',
     components: {
       statusIcon,
-      loadingIcon,
     },
     props: {
       mr: {
@@ -44,7 +42,7 @@
         class="btn btn-sm btn-default"
         @click="refreshWidget"
       >
-        <loading-icon
+        <gl-loading-icon
           v-if="isRefreshing"
           :inline="true"
         />

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

 <script>
   import Flash from '~/flash';
   import tooltip from '~/vue_shared/directives/tooltip';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import { s__, __ } from '~/locale';
   import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
   import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
@@ -15,7 +14,6 @@
     },
     components: {
       MrWidgetAuthorTime,
-      loadingIcon,
       statusIcon,
       ClipboardButton,
     },
@@ -195,7 +193,7 @@
           </button>
         </p>
         <p v-if="shouldShowSourceBranchRemoving">
-          <loading-icon :inline="true" />
+          <gl-loading-icon :inline="true" />
           <span>
             {{ s__("mrWidget|The source branch is being removed") }}
           </span>

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

@@ -2,14 +2,12 @@
   import simplePoll from '../../../lib/utils/simple_poll';
   import eventHub from '../../event_hub';
   import statusIcon from '../mr_widget_status_icon.vue';
-  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import Flash from '../../../flash';
 
   export default {
     name: 'MRWidgetRebase',
     components: {
       statusIcon,
-      loadingIcon,
     },
     props: {
       mr: {
@@ -115,7 +113,7 @@ js-toggle-container accept-action media space-children"
             class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
             @click="rebase"
           >
-            <loading-icon v-if="isMakingRequest" />
+            <gl-loading-icon v-if="isMakingRequest" />
             Rebase
           </button>
           <span

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

 <script>
 import { __ } from '~/locale';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 
 export default {
-  components: {
-    LoadingIcon,
-  },
   props: {
     isDisabled: {
       type: Boolean,
@@ -34,7 +30,7 @@ export default {
     data-toggle="dropdown"
     aria-expanded="false"
   >
-    <loading-icon
+    <gl-loading-icon
       v-show="isLoading"
       :inline="true"
     />

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

 <script>
 import getIconForFile from './file_icon/file_icon_map';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import icon from '../../vue_shared/components/icon.vue';
 
 /* This is a re-usable vue component for rendering a svg sprite
@@ -17,7 +16,6 @@ import icon from '../../vue_shared/components/icon.vue';
   */
 export default {
   components: {
-    loadingIcon,
     icon,
   },
   props: {
@@ -84,7 +82,7 @@ export default {
       :size="size"
       css-classes="folder-icon"
     />
-    <loading-icon
+    <gl-loading-icon
       v-if="loading"
       :inline="true"
     />

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

 <script>
 import CiIconBadge from './ci_badge_link.vue';
-import LoadingIcon from './loading_icon.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 import tooltip from '../directives/tooltip';
 import UserAvatarImage from './user_avatar/user_avatar_image.vue';
@@ -15,7 +14,6 @@ import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 export default {
   components: {
     CiIconBadge,
-    LoadingIcon,
     TimeagoTooltip,
     UserAvatarImage,
   },

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

@@ -17,12 +17,7 @@
 
   */
 
-  import loadingIcon from './loading_icon.vue';
-
   export default {
-    components: {
-      loadingIcon,
-    },
     props: {
       loading: {
         type: Boolean,
@@ -60,7 +55,7 @@
     @click="onClick"
   >
     <transition name="fade">
-      <loading-icon
+      <gl-loading-icon
         v-if="loading"
         :inline="true"
         :class="{

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

-<script>
-  export default {
-    props: {
-      label: {
-        type: String,
-        required: false,
-        default: 'Loading',
-      },
-
-      size: {
-        type: String,
-        required: false,
-        default: '1',
-      },
-
-      inline: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-
-    computed: {
-      rootElementType() {
-        return this.inline ? 'span' : 'div';
-      },
-      cssClass() {
-        return `fa-${this.size}x`;
-      },
-    },
-  };
-</script>
-<template>
-  <component
-    :is="rootElementType"
-    class="loading-container text-center">
-    <i
-      :class="cssClass"
-      :aria-label="label"
-      class="fa fa-spin fa-spinner"
-      aria-hidden="true"
-    >
-    </i>
-  </component>
-</template>

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

 <script>
   import datePicker from '../pikaday.vue';
-  import loadingIcon from '../loading_icon.vue';
   import toggleSidebar from './toggle_sidebar.vue';
   import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
   import { dateInWords } from '../../../lib/utils/datetime_utility';
@@ -10,7 +9,6 @@
     components: {
       datePicker,
       toggleSidebar,
-      loadingIcon,
       collapsedCalendarIcon,
     },
     props: {
@@ -112,7 +110,7 @@
     />
     <div class="title">
       {{ label }}
-      <loading-icon
+      <gl-loading-icon
         v-if="isLoading"
         :inline="true"
       />

app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue

@@ -3,7 +3,6 @@ import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import LoadingIcon from '../../loading_icon.vue';
 
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
@@ -16,7 +15,6 @@ import DropdownCreateLabel from './dropdown_create_label.vue';
 
 export default {
   components: {
-    LoadingIcon,
     DropdownTitle,
     DropdownValue,
     DropdownValueCollapsed,
@@ -164,7 +162,7 @@ dropdown-menu-labels dropdown-menu-selectable"
             <dropdown-search-input/>
             <div class="dropdown-content"></div>
             <div class="dropdown-loading">
-              <loading-icon />
+              <gl-loading-icon />
             </div>
             <dropdown-footer
               v-if="showCreate"

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

 <script>
   import { s__ } from '../../locale';
   import icon from './icon.vue';
-  import loadingIcon from './loading_icon.vue';
 
   const ICON_ON = 'status_success_borderless';
   const ICON_OFF = 'status_failed_borderless';
@@ -11,7 +10,6 @@
   export default {
     components: {
       icon,
-      loadingIcon,
     },
 
     model: {
@@ -78,7 +76,7 @@
       class="project-feature-toggle"
       @click="toggleFeature"
     >
-      <loadingIcon class="loading-icon" />
+      <gl-loading-icon class="loading-icon" />
       <span class="toggle-icon">
         <icon
           :name="toggleIcon"

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.29.0",
-    "@gitlab-org/gitlab-ui": "^1.2.0",
+    "@gitlab-org/gitlab-ui": "^1.5.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",

spec/javascripts/vue_shared/components/file_icon_spec.js

@@ -62,9 +62,11 @@ describe('File Icon component', () => {
       loading: true,
     });
 
-    expect(
-      vm.$el.querySelector('i').getAttribute('class'),
-    ).toEqual('fa fa-spin fa-spinner fa-1x');
+    const { classList } = vm.$el.querySelector('i');
+    expect(classList.contains('fa')).toEqual(true);
+    expect(classList.contains('fa-spin')).toEqual(true);
+    expect(classList.contains('fa-spinner')).toEqual(true);
+    expect(classList.contains('fa-1x')).toEqual(true);
   });
 
   it('should add a special class and a size class', () => {

spec/javascripts/vue_shared/components/loading_icon_spec.js

-import Vue from 'vue';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-
-describe('Loading Icon Component', () => {
-  let LoadingIconComponent;
-
-  beforeEach(() => {
-    LoadingIconComponent = Vue.extend(loadingIcon);
-  });
-
-  it('should render a spinner font awesome icon', () => {
-    const component = new LoadingIconComponent().$mount();
-
-    expect(
-      component.$el.querySelector('i').getAttribute('class'),
-    ).toEqual('fa fa-spin fa-spinner fa-1x');
-
-    expect(component.$el.tagName).toEqual('DIV');
-    expect(component.$el.classList).toContain('text-center');
-    expect(component.$el.classList).toContain('loading-container');
-  });
-
-  it('should render accessibility attributes', () => {
-    const component = new LoadingIconComponent().$mount();
-
-    const icon = component.$el.querySelector('i');
-    expect(icon.getAttribute('aria-hidden')).toEqual('true');
-    expect(icon.getAttribute('aria-label')).toEqual('Loading');
-  });
-
-  it('should render the provided label', () => {
-    const component = new LoadingIconComponent({
-      propsData: {
-        label: 'This is a loading icon',
-      },
-    }).$mount();
-
-    expect(
-      component.$el.querySelector('i').getAttribute('aria-label'),
-    ).toEqual('This is a loading icon');
-  });
-
-  it('should render the provided size', () => {
-    const component = new LoadingIconComponent({
-      propsData: {
-        size: '2',
-      },
-    }).$mount();
-
-    expect(
-      component.$el.querySelector('i').classList.contains('fa-2x'),
-    ).toEqual(true);
-  });
-});

yarn.lock

@@ -82,9 +82,9 @@
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
 
-"@gitlab-org/gitlab-ui@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.2.0.tgz#1d9bf067c2ccf70bcc8e8150644dac475106f3c8"
+"@gitlab-org/gitlab-ui@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.0.tgz#320ba164ba8812ff64f94b1cae79a7b749f5bc03"
   dependencies:
     "@gitlab-org/gitlab-svgs" "^1.23.0"
     bootstrap-vue "^2.0.0-rc.11"