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 = $( - '
', - ).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'); } } diff --git a/app/assets/javascripts/issues/show/components/fields/description_template.vue b/app/assets/javascripts/issues/show/components/fields/description_template.vue index 9ce49b65a1a..d528641dcb6 100644 --- a/app/assets/javascripts/issues/show/components/fields/description_template.vue +++ b/app/assets/javascripts/issues/show/components/fields/description_template.vue @@ -68,7 +68,10 @@ export default { data-toggle="dropdown" > {{ __('Choose a template') }} - +