Apply suggestion to...

Apply suggestion to app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue

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

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     canEdit: {
       type: Boolean,
@@ -13,7 +18,7 @@ export default {
   <div class="title hide-collapsed append-bottom-10">
     {{ __('Labels') }}
     <template v-if="canEdit">
-      <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true"> </i>
+      <gl-loading-icon inline class="align-text-top block-loading" />
       <button
         type="button"
         class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle"

changelogs/unreleased/rk4bir-master-patch-97031.yml

+---
+title: Migrated the sidebar label select dropdown title component spinner to utilize GlLoadingIcon
+merge_request: 24914
+author: Raihan Kabir
+type: changed

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js

-import Vue from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue';
 
-const createComponent = (canEdit = true) => {
-  const Component = Vue.extend(dropdownTitleComponent);
-
-  return mountComponent(Component, {
+const createComponent = (canEdit = true) =>
+  shallowMount(dropdownTitleComponent, {
+    propsData: {
       canEdit,
+    },
   });
-};
 
 describe('DropdownTitleComponent', () => {
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    vm = createComponent();
+    wrapper = createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('template', () => {
     it('renders title text', () => {
-      expect(vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
-      expect(vm.$el.innerText.trim()).toContain('Labels');
+      expect(wrapper.vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
+      expect(wrapper.vm.$el.innerText.trim()).toContain('Labels');
     });
 
     it('renders spinner icon element', () => {
-      expect(vm.$el.querySelector('.fa-spinner.fa-spin.block-loading')).not.toBeNull();
+      expect(wrapper.find(GlLoadingIcon)).not.toBeNull();
     });
 
     it('renders `Edit` button element', () => {
-      const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
+      const editBtnEl = wrapper.vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
 
       expect(editBtnEl).not.toBeNull();
       expect(editBtnEl.innerText.trim()).toBe('Edit');