Add latest changes from gitlab-org/gitlab@master

1 files changed, 8 insertions, 8 deletions

diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index b7d3c164e67..7eb699eacbe 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -2,6 +2,7 @@
 
 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 
 export default class TemplateSelector {
   constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
@@ -10,10 +11,9 @@ export default class TemplateSelector {
     this.dropdown = dropdown;
     this.$dropdownContainer = wrapper;
     this.$filenameInput = $input || $('#file_name');
-    this.$dropdownIcon = $('.dropdown-menu-toggle-icon', dropdown);
-    this.$loadingIcon = $(
-      '<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>',
-    ).insertAfter(this.$dropdownIcon);
+    this.dropdownIcon = dropdown[0].querySelector('.dropdown-menu-toggle-icon');
+    this.loadingIcon = loadingIconForLegacyJS({ classes: ['gl-display-none'] });
+    this.dropdownIcon.parentNode.insertBefore(this.loadingIcon, this.dropdownIcon.nextSibling);
 
     this.initDropdown(dropdown, data);
     this.listenForFilenameInput();
@@ -100,12 +100,12 @@ export default class TemplateSelector {
   }
 
   startLoadingSpinner() {
-    this.$loadingIcon.removeClass('gl-display-none');
-    this.$dropdownIcon.addClass('gl-display-none');
+    this.loadingIcon.classList.remove('gl-display-none');
+    this.dropdownIcon.classList.add('gl-display-none');
   }
 
   stopLoadingSpinner() {
-    this.$loadingIcon.addClass('gl-display-none');
-    this.$dropdownIcon.removeClass('gl-display-none');
+    this.loadingIcon.classList.add('gl-display-none');
+    this.dropdownIcon.classList.remove('gl-display-none');
   }
 }