Merge branch 'gl-ui-loading-icon-ee' into 'master'

Remove gitlab-ui loading icon from global (EE)

See merge request gitlab-org/gitlab-ee!8170

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

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'Badge',
   components: {
     Icon,
     Tooltip,
+    GlLoadingIcon,
   },
   directives: {
     Tooltip,

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

@@ -4,6 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
@@ -14,6 +15,7 @@ export default {
   components: {
     Badge,
     LoadingButton,
+    GlLoadingIcon,
   },
   props: {
     isEditing: {

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

 <script>
 import { mapState } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import BadgeListRow from './badge_list_row.vue';
 import { GROUP_BADGE } from '../constants';
 
@@ -7,6 +8,7 @@ export default {
   name: 'BadgeList',
   components: {
     BadgeListRow,
+    GlLoadingIcon,
   },
   computed: {
     ...mapState(['badges', 'isLoading', 'kind']),

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

@@ -2,6 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { PROJECT_BADGE } from '../constants';
 import Badge from './badge.vue';
 
@@ -10,6 +11,7 @@ export default {
   components: {
     Badge,
     Icon,
+    GlLoadingIcon,
   },
   props: {
     badge: {

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

 <script>
 import Sortable from 'sortablejs';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
@@ -11,6 +12,7 @@ export default {
   components: {
     boardCard,
     boardNewIssue,
+    GlLoadingIcon,
   },
   props: {
     groupId: {

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

@@ -6,6 +6,7 @@ import ModalList from './list.vue';
 import ModalFooter from './footer.vue';
 import EmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
@@ -13,6 +14,7 @@ export default {
     ModalHeader,
     ModalList,
     ModalFooter,
+    GlLoadingIcon,
   },
   props: {
     newIssuePath: {

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

@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../eventhub';
 import Api from '../../api';
 
@@ -9,6 +10,7 @@ export default {
   name: 'BoardProjectSelect',
   components: {
     Icon,
+    GlLoadingIcon,
   },
   props: {
     groupId: {

app/assets/javascripts/commons/index.js

@@ -3,5 +3,4 @@ import './polyfills';
 import './jquery';
 import './bootstrap';
 import './vue';
-import './gitlab_ui';
 import '../lib/utils/axios_utils';

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../eventhub';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     deployKey: {
       type: Object,

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

@@ -6,11 +6,13 @@ import eventHub from '../eventhub';
 import DeployKeysService from '../service';
 import DeployKeysStore from '../store';
 import KeysPanel from './keys_panel.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     KeysPanel,
     NavigationTabs,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {

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

@@ -3,6 +3,7 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../../notes/event_hub';
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
@@ -21,6 +22,7 @@ export default {
     HiddenFilesWarning,
     CommitWidget,
     TreeList,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {

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

@@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
 
@@ -10,6 +11,7 @@ export default {
   components: {
     DiffFileHeader,
     DiffContent,
+    GlLoadingIcon,
   },
   props: {
     file: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import environmentTable from '../components/environments_table.vue';
 
@@ -6,6 +7,7 @@ export default {
   components: {
     environmentTable,
     tablePagination,
+    GlLoadingIcon,
   },
   props: {
     isLoading: {

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

@@ -4,6 +4,7 @@ import { formatTime } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   directives: {
@@ -11,6 +12,7 @@ export default {
   },
   components: {
     Icon,
+    GlLoadingIcon,
   },
   props: {
     actions: {

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

@@ -9,10 +9,12 @@ 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 { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     Icon,
+    GlLoadingIcon,
   },
 
   directives: {

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

@@ -2,6 +2,7 @@
 /**
  * Render environments table.
  */
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import environmentItem from './environment_item.vue';
 
 import deployBoard from 'ee/environments/components/deploy_board_component.vue'; // eslint-disable-line import/order
@@ -10,6 +11,7 @@ export default {
   components: {
     environmentItem,
     deployBoard,
+    GlLoadingIcon,
   },
 
   props: {

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../event_hub';
 import store from '../store/';
 import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
@@ -14,6 +15,7 @@ export default {
   components: {
     FrequentItemsSearchInput,
     FrequentItemsList,
+    GlLoadingIcon,
   },
   mixins: [frequentItemsMixin],
   props: {

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

@@ -8,6 +8,7 @@ import { HIDDEN_CLASS } from '~/lib/utils/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../event_hub';
 import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants';
 import groupsComponent from './groups.vue';
@@ -16,6 +17,7 @@ export default {
   components: {
     DeprecatedModal,
     groupsComponent,
+    GlLoadingIcon,
   },
   props: {
     action: {

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

@@ -2,12 +2,14 @@
 import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Item from './item.vue';
 
 export default {
   components: {
     Item,
     Icon,
+    GlLoadingIcon,
   },
   data() {
     return {

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

 <script>
 import { mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     message: {
       type: Object,

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

@@ -2,10 +2,12 @@
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     DropdownButton,
+    GlLoadingIcon,
   },
   props: {
     data: {

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

 <script>
 import { mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Stage from './stage.vue';
 
 export default {
   components: {
     Stage,
+    GlLoadingIcon,
   },
   props: {
     stages: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
@@ -12,6 +13,7 @@ export default {
     Icon,
     CiIcon,
     Item,
+    GlLoadingIcon,
   },
   props: {
     stage: {

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

@@ -3,6 +3,7 @@ import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
 
@@ -16,6 +17,7 @@ export default {
     TokenedInput,
     Item,
     Icon,
+    GlLoadingIcon,
   },
   data() {
     return {

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { sprintf, __ } from '../../../locale';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
@@ -17,6 +18,7 @@ export default {
     Tab,
     JobsList,
     EmptyState,
+    GlLoadingIcon,
   },
   computed: {
     ...mapState(['pipelinesEmptyStateSvgPath', 'links']),

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

@@ -3,6 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { Manager } from 'smooshpack';
 import { listen } from 'codesandbox-api';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Navigator from './navigator.vue';
 import { packageJsonPath } from '../../constants';
 import { createPathWithExt } from '../../utils';
@@ -10,6 +11,7 @@ import { createPathWithExt } from '../../utils';
 export default {
   components: {
     Navigator,
+    GlLoadingIcon,
   },
   data() {
     return {

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

 <script>
 import { listen } from 'codesandbox-api';
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     Icon,
+    GlLoadingIcon,
   },
   props: {
     manager: {

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

@@ -239,16 +239,16 @@ export default {
           :erased-at="job.erased_at"
         />
 
-        <div 
+        <div
           v-if="job.archived"
           ref="sticky"
           class="js-archived-job prepend-top-default archived-sticky sticky-top"
         >
-          <icon 
+          <icon
             name="lock"
             class="align-text-bottom"
           />
-                
+
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!--job log -->

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

@@ -9,11 +9,13 @@ import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
 import ellipsisSvg from 'icons/_ellipsis_v.svg';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'NoteActions',
   components: {
     Icon,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,

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

 <script>
 import _ from 'underscore';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import StageColumnComponent from './stage_column_component.vue';
 import LinkedPipelinesColumn from 'ee/pipelines/components/graph/linked_pipelines_column.vue'; // eslint-disable-line import/order
 
@@ -7,6 +8,7 @@ export default {
   components: {
     LinkedPipelinesColumn,
     StageColumnComponent,
+    GlLoadingIcon,
   },
   props: {
     isLoading: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import ciHeader from '../../vue_shared/components/header_ci_component.vue';
 import eventHub from '../event_hub';
 
@@ -6,6 +7,7 @@ export default {
   name: 'PipelineHeaderSection',
   components: {
     ciHeader,
+    GlLoadingIcon,
   },
   props: {
     pipeline: {

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

@@ -4,6 +4,7 @@ import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   directives: {
@@ -12,6 +13,7 @@ export default {
   components: {
     Icon,
     GlCountdown,
+    GlLoadingIcon,
   },
   props: {
     actions: {

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

@@ -13,6 +13,7 @@
  */
 
 import $ from 'jquery';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { __ } from '../../locale';
 import Flash from '../../flash';
 import axios from '../../lib/utils/axios_utils';
@@ -26,6 +27,7 @@ export default {
   components: {
     Icon,
     JobItem,
+    GlLoadingIcon,
   },
 
   directives: {

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

 import Visibility from 'visibilityjs';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { __ } from '../../locale';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
@@ -13,6 +14,7 @@ export default {
     PipelinesTableComponent,
     SvgBlankState,
     EmptyState,
+    GlLoadingIcon,
   },
   data() {
     return {

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

@@ -2,6 +2,7 @@ import _ from 'underscore';
 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';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 import store from '../store';
 
@@ -11,6 +12,7 @@ export default {
     DropdownButton,
     DropdownSearchInput,
     DropdownHiddenInput,
+    GlLoadingIcon,
   },
   props: {
     fieldId: {

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

@@ -5,6 +5,7 @@ import Poll from '~/lib/utils/poll';
 import Flash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import CommitPipelineService from '../services/commit_pipeline_service';
 
 export default {
@@ -13,6 +14,7 @@ export default {
   },
   components: {
     ciIcon,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {

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

 <script>
 import { mapGetters, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Flash from '../../flash';
 import store from '../stores';
 import collapsibleContainer from './collapsible_container.vue';
@@ -9,6 +10,7 @@ export default {
   name: 'RegistryListApp',
   components: {
     collapsibleContainer,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {

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

 <script>
 import { mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Flash from '../../flash';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -12,6 +13,7 @@ export default {
   components: {
     clipboardButton,
     tableRegistry,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,

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

 <script>
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 /**
  * Renders the summary row for each report
@@ -15,6 +16,7 @@ export default {
   components: {
     CiIcon,
     Popover,
+    GlLoadingIcon,
   },
   props: {
     summary: {

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

@@ -2,6 +2,7 @@
 import { __, n__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   directives: {
@@ -9,6 +10,7 @@ export default {
   },
   components: {
     userAvatarImage,
+    GlLoadingIcon,
   },
   props: {
     loading: {

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

 <script>
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -13,6 +14,7 @@ export default {
   },
   components: {
     Icon,
+    GlLoadingIcon,
   },
   props: {
     issuableId: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import ciIcon from '../../vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
     ciIcon,
+    GlLoadingIcon,
   },
   props: {
     status: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
 
@@ -6,6 +7,7 @@ export default {
   name: 'MRWidgetAutoMergeFailed',
   components: {
     statusIcon,
+    GlLoadingIcon,
   },
   props: {
     mr: {

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

@@ -6,6 +6,7 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'MRWidgetMerged',
@@ -16,6 +17,7 @@ export default {
     MrWidgetAuthorTime,
     statusIcon,
     ClipboardButton,
+    GlLoadingIcon,
   },
   props: {
     mr: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -8,6 +9,7 @@ export default {
   name: 'MRWidgetRebase',
   components: {
     statusIcon,
+    GlLoadingIcon,
   },
   props: {
     mr: {

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

 <script>
 import { __ } from '~/locale';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     isDisabled: {
       type: Boolean,

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import getIconForFile from './file_icon/file_icon_map';
 import icon from '../../vue_shared/components/icon.vue';
 
@@ -17,6 +18,7 @@ import icon from '../../vue_shared/components/icon.vue';
 export default {
   components: {
     icon,
+    GlLoadingIcon,
   },
   props: {
     fileName: {

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

@@ -9,6 +9,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+
   props: {
     endDateString: {
       type: String,

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 /* eslint-disable vue/require-default-prop */
 /* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
@@ -18,6 +19,9 @@
   */
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     loading: {
       type: Boolean,

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import datePicker from '../pikaday.vue';
 import toggleSidebar from './toggle_sidebar.vue';
 import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
@@ -10,6 +11,7 @@ export default {
     datePicker,
     toggleSidebar,
     collapsedCalendarIcon,
+    GlLoadingIcon,
   },
   props: {
     blockClass: {

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

@@ -4,6 +4,7 @@ import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
@@ -24,6 +25,7 @@ export default {
     DropdownSearchInput,
     DropdownFooter,
     DropdownCreateLabel,
+    GlLoadingIcon,
   },
   props: {
     showCreate: {

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

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { s__ } from '../../locale';
 import icon from './icon.vue';
 
@@ -10,6 +11,7 @@ const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 export default {
   components: {
     icon,
+    GlLoadingIcon,
   },
 
   model: {

changelogs/unreleased/gl-ui-loading-icon.yml

+---
+title: Remove gitlab-ui's loading icon from global
+merge_request:
+author:
+type: performance

ee/app/assets/javascripts/boards/components/assignee_select.vue

 <script>
 import UsersSelect from '~/users_select';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     UserAvatarImage,
+    GlLoadingIcon,
   },
   props: {
     anyUserText: {

ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue

 <script>
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import ListFilter from './list_filter.vue';
 import ListContent from './list_content.vue';
 
@@ -6,6 +7,7 @@ export default {
   components: {
     ListFilter,
     ListContent,
+    GlLoadingIcon,
   },
   props: {
     loading: {

ee/app/assets/javascripts/boards/components/milestone_select.vue

 <script>
 import MilestoneSelect from '~/milestone_select';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 const ANY_MILESTONE = 'Any Milestone';
 const NO_MILESTONE = 'No Milestone';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     board: {
       type: Object,

ee/app/assets/javascripts/boards/components/weight_select.vue

@@ -2,11 +2,15 @@
 /* eslint-disable vue/require-default-prop */
 
 import WeightSelect from 'ee/weight_select';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 const ANY_WEIGHT = 'Any Weight';
 const NO_WEIGHT = 'No Weight';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     board: {
       type: Object,

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -12,11 +12,13 @@ import _ from 'underscore';
 import { n__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import deployBoardSvg from 'ee_empty_states/icons/_deploy_board.svg';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import instanceComponent from './deploy_board_instance_component.vue';
 
 export default {
   components: {
     instanceComponent,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,

ee/app/assets/javascripts/epics/sidebar/components/sidebar_date_picker.vue

@@ -8,6 +8,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import DatePicker from '~/vue_shared/components/pikaday.vue';
 import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 const label = __('Date picker');
 const pickerLabel = __('Fixed date');
@@ -22,6 +23,7 @@ export default {
     DatePicker,
     CollapsedCalendarIcon,
     ToggleSidebar,
+    GlLoadingIcon,
   },
   props: {
     blockClass: {

ee/app/assets/javascripts/geo_nodes/components/app.vue

@@ -9,11 +9,13 @@ import eventHub from '../event_hub';
 import { NODE_ACTIONS } from '../constants';
 
 import GeoNodeItem from './geo_node_item.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     DeprecatedModal,
     GeoNodeItem,
+    GlLoadingIcon,
   },
   props: {
     store: {

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -2,10 +2,12 @@
 import { s__ } from '~/locale';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     icon,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,

ee/app/assets/javascripts/group_member_contributions/components/app.vue

@@ -6,12 +6,14 @@ import COLUMNS from '../constants';
 
 import TableHeader from './table_header.vue';
 import TableBody from './table_body.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   columns: COLUMNS,
   components: {
     TableHeader,
     TableBody,
+    GlLoadingIcon,
   },
   props: {
     store: {

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -3,11 +3,13 @@ import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import AlertWidgetForm from './alert_widget_form.vue';
 import AlertsService from '../services/alerts_service';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     Icon,
     AlertWidgetForm,
+    GlLoadingIcon,
   },
   props: {
     alertsEndpoint: {

ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue

 <script>
 import { mapState, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import DashboardProject from './project.vue';
 import ProjectSearch from './project_search.vue';
 
@@ -7,6 +8,7 @@ export default {
   components: {
     DashboardProject,
     ProjectSearch,
+    GlLoadingIcon,
   },
   props: {
     addPath: {

ee/app/assets/javascripts/operations/components/dashboard/project_search.vue

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import TokenizedInput from '../tokenized_input/input.vue';
 import inputFocus from '../../mixins';
 
@@ -14,6 +15,7 @@ export default {
     Icon,
     ProjectAvatar,
     TokenizedInput,
+    GlLoadingIcon,
   },
   mixins: [inputFocus],
   data() {

ee/app/assets/javascripts/related_issues/components/add_issuable_form.vue

 <script>
 import $ from 'jquery';
 import GfmAutoComplete from '~/gfm_auto_complete';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../event_hub';
 import issueToken from './issue_token.vue';
 
@@ -8,6 +9,7 @@ export default {
   name: 'AddIssuableForm',
   components: {
     issueToken,
+    GlLoadingIcon,
   },
   props: {
     inputValue: {

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -3,6 +3,7 @@ import Sortable from 'sortablejs';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import sortableConfig from 'ee/sortable/sortable_config';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import eventHub from '../event_hub';
 import issueItem from './issue_item.vue';
 import addIssuableForm from './add_issuable_form.vue';
@@ -16,6 +17,7 @@ export default {
     Icon,
     addIssuableForm,
     issueItem,
+    GlLoadingIcon,
   },
   props: {
     isFetching: {

ee/app/assets/javascripts/roadmap/components/app.vue

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import Flash from '~/flash';
 import { s__ } from '~/locale';
 
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import epicsListEmpty from './epics_list_empty.vue';
 import roadmapShell from './roadmap_shell.vue';
 
@@ -10,6 +11,7 @@ export default {
   components: {
     epicsListEmpty,
     roadmapShell,
+    GlLoadingIcon,
   },
   props: {
     store: {

ee/app/assets/javascripts/sidebar/components/sidebar_item_epic.vue

@@ -3,12 +3,16 @@ import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import Store from '../stores/sidebar_store';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'SidebarItemEpic',
   directives: {
     tooltip,
   },
+  components: {
+    GlLoadingIcon,
+  },
   data() {
     return {
       store: new Store(),

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -4,10 +4,12 @@ import { s__ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
 import tooltip from '~/vue_shared/directives/tooltip';
 import icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     icon,
+    GlLoadingIcon,
   },
   directives: {
     tooltip,

ee/app/assets/javascripts/vue_shared/license_management/license_management.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton } from '@gitlab-org/gitlab-ui';
+import { GlButton, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { s__ } from '~/locale';
 import AddLicenseForm from './components/add_license_form.vue';
 import LicenseManagementRow from './components/license_management_row.vue';
@@ -16,6 +16,7 @@ export default {
     DeleteConfirmationModal,
     LicenseManagementRow,
     GlButton,
+    GlLoadingIcon,
   },
   props: {
     apiUrl: {