Merge branch 'add-gitlab-ui-loading-icon' into 'master'

Use gitlab-ui loading icon

See merge request gitlab-org/gitlab-ce!21659

65 files changed, 89 insertions, 305 deletions

diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index 155c348286c..b08dc454d12 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -1,13 +1,11 @@
 <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"
     />
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index b3f25da87ce..aff7c4180e3 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/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>
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index d2ec0fbb2c0..359d3e10380 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -1,6 +1,5 @@
 <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"
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index 712d81d0430..5d16ba3ce6d 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/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"
         />
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index bfc8d9b03ad..606c9e81db4 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/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"
         />
diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index 7b33a7573e7..0c4c709324d 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -1,7 +1,6 @@
 <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/>
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index ef9844d5562..d4676914e02 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/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>
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 95c4be64d35..4849b0fa3db 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/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"
     />
 
diff --git a/app/assets/javascripts/commons/gitlab_ui.js b/app/assets/javascripts/commons/gitlab_ui.js
index 14c2db24205..c2dc0539398 100644
--- a/app/assets/javascripts/commons/gitlab_ui.js
+++ b/app/assets/javascripts/commons/gitlab_ui.js
@@ -1,12 +1,14 @@
 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);
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 7399fc97d45..10548da8ec5 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -1,11 +1,7 @@
 <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"
     />
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index d91e4809126..aa52f120fe7 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,7 +1,6 @@
 <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">
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 4261a99c52b..bfb992340bc 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/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
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 67e85c4eee3..940e06a75cc 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/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"
     />
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 9aa224fa407..9de851c9409 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,12 +1,10 @@
 <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>
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 63d83e307ee..e1f9248bc4c 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,7 +1,6 @@
 <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>
 
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 4deeef4beb9..efbf88d0f11 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/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>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 016e9f7c7b3..a9d9d768c06 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/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>
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index d88624f7f8d..d71964612c5 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/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,
   },
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 2f030de8967..70a8838b772 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -1,6 +1,5 @@
 <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"
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 69f192ac75e..a032f291546 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 6db7b9d6b0e..bf0ff6e35ec 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -1,13 +1,11 @@
 <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
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index acbc98b7a7b..a20dc0a7006 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -1,11 +1,7 @@
 <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
         />
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index 13059937f85..ef1f6de3a86 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -1,13 +1,11 @@
 <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
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index 3b16b860ecd..acd37605d16 100644
--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -1,11 +1,9 @@
 <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
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 15e881b7bc8..1c474acb4b2 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index fc612956688..c8343e77860 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/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
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 5757dfdc925..0a2681b7a1e 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/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
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index 39a1bd1f61b..37a8ad36507 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index 4bf346946b6..42f23801692 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -1,12 +1,10 @@
 <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"
       />
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 1e7f4b2c3f7..3e49b04e44e 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -1,13 +1,11 @@
 <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>
diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
index 36d4a3e2bc9..1210ccd038a 100644
--- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
@@ -1,5 +1,4 @@
 <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>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 87fc002fcbc..beb53da0e6d 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/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">
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 7f9d23b211b..42c87fdf54a 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/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,
   },
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 1952dd453f4..e27f195c9b0 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,12 +1,10 @@
 <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>
 
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 001eaeaa065..1f9187c3d65 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -1,13 +1,11 @@
 <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>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index c9d2dc3a3c5..ea526cf1309 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/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"
       />
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 1c8d7303c52..017dd560621 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,6 +1,5 @@
 <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">
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index c7df69c69ed..3e13bad9a0b 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/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"
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 2cb558b0dec..8929b397f6c 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/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 {
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
index c15d8ba49e1..d5266544307 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
@@ -1,5 +1,4 @@
 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,
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index d4497924ad8..2c02f436b69 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/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>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 08d0a122579..fc17e2fab49 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/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>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index b5476684c6a..ca7c79f75f0 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/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>
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 1c1e17563a1..120b4fc2f2b 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -1,7 +1,6 @@
 <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
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 31f88675912..7e2287ac4db 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,7 +1,6 @@
 <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
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index cea409aa130..d4c4d779d44 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/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
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 4456d84c968..51188981bed 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -1,6 +1,5 @@
 <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"
       />
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 56d57f6aac8..286a16f7bbf 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -1,7 +1,6 @@
 <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"
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index ffaed9c7193..a6b3a674952 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/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"
     />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 9aff95dcfec..035ae791a1d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -1,11 +1,9 @@
 <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
diff --git 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
index 2133124347c..01294d5b40c 100644
--- 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
@@ -1,5 +1,4 @@
 <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"
         />
diff --git 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
index 1a444c04a1d..2f2394371ef 100644
--- 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
@@ -1,7 +1,6 @@
 <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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 2d8c3d6be87..f31c7a3edb8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/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
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index af5ebcdc40a..31087017968 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -1,11 +1,7 @@
 <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"
     />
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 878c805ada5..408f7d7965f 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,6 +1,5 @@
 <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"
     />
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 49fbce75110..18f5ce53bb1 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,6 +1,5 @@
 <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,
   },
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 2ff0c056b9c..4cbd3e6429d 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/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="{
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
deleted file mode 100644
index db22c5f02cd..00000000000
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<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>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 74998a4787d..9d757b27edc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -1,6 +1,5 @@
 <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"
       />
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index a3fc358130f..3df286de129 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/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"
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index a897300b62b..5b9c51786d6 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,7 +1,6 @@
 <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"
diff --git a/package.json b/package.json
index 6dd6a84f1e0..4a479b6fb2a 100644
--- a/package.json
+++ b/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",
diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js
index 1c666fc6c55..f2a09d08829 100644
--- a/spec/javascripts/vue_shared/components/file_icon_spec.js
+++ b/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', () => {
diff --git a/spec/javascripts/vue_shared/components/loading_icon_spec.js b/spec/javascripts/vue_shared/components/loading_icon_spec.js
deleted file mode 100644
index 5cd3466f501..00000000000
--- a/spec/javascripts/vue_shared/components/loading_icon_spec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-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);
-  });
-});
diff --git a/yarn.lock b/yarn.lock
index 27ba4c6ac0b..fe4702f3a78 100644
--- a/yarn.lock
+++ b/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"