Use gitlab-ui loading icon

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"

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

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

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);
-  });
-});

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"