Use gitlab-ui loading icon

8 files changed, 6 insertions, 70 deletions

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"