Tech debt: Creates vue component for loading icon

5 files changed, 30 insertions, 28 deletions

diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
index d1c60b570de..37a6f02d8fd 100644
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ b/app/assets/javascripts/pipelines/components/async_button.vue
@@ -3,6 +3,7 @@
 /* global Flash */
 import '~/flash';
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -37,6 +38,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       isLoading: false,
@@ -94,9 +99,6 @@ export default {
     <i
       :class="iconClass"
       aria-hidden="true" />
-    <i
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true"
-      v-if="isLoading" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 1f1b99ff401..14c98847d93 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -5,11 +5,13 @@
   import PipelineService from '../../services/pipeline_service';
   import PipelineStore from '../../stores/pipeline_store';
   import stageColumnComponent from './stage_column_component.vue';
+  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import '../../../flash';
 
   export default {
     components: {
       stageColumnComponent,
+      loadingIcon,
     },
 
     data() {
@@ -89,11 +91,10 @@
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph">
       <div class="text-center">
-        <i
+        <loading-icon
           v-if="isLoading"
-          class="loading-icon fa fa-spin fa-spinner fa-3x"
-          aria-label="Loading"
-          aria-hidden="true" />
+          size="3"
+          />
       </div>
 
       <ul
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.js b/app/assets/javascripts/pipelines/components/pipelines_actions.js
index ffda18d2e0f..b9e066c5db1 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.js
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.js
@@ -3,6 +3,7 @@
 import '~/flash';
 import playIconSvg from 'icons/_icon_play.svg';
 import eventHub from '../event_hub';
+import loadingIconComponent from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -17,6 +18,10 @@ export default {
     },
   },
 
+  components: {
+    loadingIconComponent,
+  },
+
   data() {
     return {
       playIconSvg,
@@ -65,10 +70,7 @@ export default {
         <i
           class="fa fa-caret-down"
           aria-hidden="true" />
-        <i
-          v-if="isLoading"
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
+        <loading-icon v-if="isLoading" />
       </button>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 310f44b06df..7fc19fce1ff 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -15,6 +15,7 @@
 
 /* global Flash */
 import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
 export default {
   props: {
@@ -38,6 +39,10 @@ export default {
     };
   },
 
+  components: {
+    loadingIcon,
+  },
+
   updated() {
     if (this.dropdownContent.length > 0) {
       this.stopDropdownClickPropagation();
@@ -153,15 +158,7 @@ export default {
         :class="dropdownClass"
         class="js-builds-dropdown-list scrollable-menu">
 
-        <div
-          class="text-center"
-          v-if="isLoading">
-          <i
-            class="fa fa-spin fa-spinner"
-            aria-hidden="true"
-            aria-label="Loading">
-          </i>
-        </div>
+        <loading-icon v-if="isLoading"/>
 
         <ul
           v-else
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 511f10b66f1..050551e5075 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -7,6 +7,7 @@ import EmptyState from './components/empty_state.vue';
 import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
+import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 
 export default {
@@ -24,6 +25,7 @@ export default {
     'error-state': ErrorState,
     'navigation-tabs': NavigationTabs,
     'navigation-controls': NavigationControls,
+    loadingIcon,
   },
 
   data() {
@@ -244,13 +246,11 @@ export default {
 
       <div class="content-list pipelines">
 
-        <div
-          class="realtime-loading"
-          v-if="isLoading">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-        </div>
+        <loading-icon
+          label="Loading Pipelines"
+          size="3"
+          v-if="isLoading"
+          />
 
         <empty-state
           v-if="shouldRenderEmptyState"