Merge branch '27966-branch-ref-switcher-input-filter-broken' into 'master'

Display loading indicator when filtering ref switcher dropdown

Closes #27966

See merge request !9144

4 files changed, 17 insertions, 3 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 77fa662892a..0d618caf350 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -47,9 +47,11 @@
           }
           // Only filter asynchronously only if option remote is set
           if (this.options.remote) {
+            $inputContainer.parent().addClass('is-loading');
             clearTimeout(timeout);
             return timeout = setTimeout(function() {
               return this.options.query(this.input.val(), function(data) {
+                $inputContainer.parent().removeClass('is-loading');
                 return this.options.callback(data);
               }.bind(this));
             }.bind(this), 250);
diff --git a/changelogs/unreleased/27966-branch-ref-switcher-input-filter-broken.yml b/changelogs/unreleased/27966-branch-ref-switcher-input-filter-broken.yml
new file mode 100644
index 00000000000..6fa13395a7d
--- /dev/null
+++ b/changelogs/unreleased/27966-branch-ref-switcher-input-filter-broken.yml
@@ -0,0 +1,4 @@
+---
+title: Display loading indicator when filtering ref switcher dropdown
+merge_request:
+author:
diff --git a/spec/features/projects/ref_switcher_spec.rb b/spec/features/projects/ref_switcher_spec.rb
index 38fe2d92885..4eafac1acd8 100644
--- a/spec/features/projects/ref_switcher_spec.rb
+++ b/spec/features/projects/ref_switcher_spec.rb
@@ -20,9 +20,9 @@ feature 'Ref switcher', feature: true, js: true do
       input.set 'binary'
       wait_for_ajax
 
-      input.native.send_keys :down
-      input.native.send_keys :down
-      input.native.send_keys :enter
+      page.within '.dropdown-content ul' do
+        input.native.send_keys :enter
+      end
     end
 
     expect(page).to have_title 'binary-encoding'
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 317f38c5888..c207fb00a47 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -139,6 +139,14 @@ require('~/lib/utils/url_utility');
         this.dropdownButtonElement.click();
       });
 
+      it('should show loading indicator while search results are being fetched by backend', () => {
+        const dropdownMenu = document.querySelector('.dropdown-menu');
+
+        expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(true);
+        remoteCallback();
+        expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(false);
+      });
+
       it('should not focus search input while remote task is not complete', () => {
         expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR));
         remoteCallback();