Use gitlab-ui loading icon

f815b48f · Clement Ho · Mike Greiling · 85aeaf05 · f815b48f · f815b48f
Commit f815b48f authored Sep 11, 2018 by Clement Ho Committed by Mike Greiling Sep 11, 2018
65 changed files
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/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"
    />

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

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

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

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

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

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

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


--- a/app/assets/javascripts/commons/gitlab_ui.js
+++ b/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);
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/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"
    />

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

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

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

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

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


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

--- 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,
  },

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

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

--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/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

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

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

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

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

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

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

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

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

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

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

--- 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,
  },

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


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

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


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

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

--- 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 {

--- 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
 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,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

--- 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="{

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

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

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

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

--- 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', () => {

--- a/spec/javascripts/vue_shared/components/loading_icon_spec.js
+++ b/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);
-  });
-});
--- 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"