Optimize groups filter

When searching for a group, submit a request that returns only the
filtered list of groups. This makes the state of the page more
reliable because it avoids having to wait for the list of groups to
dynamically refresh.

app/views/dashboard/groups/_groups.html.haml

 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
     .loading-container.text-center
-      = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')
+      = icon('spinner spin 2x', class: 'loading-animation prepend-top-20 qa-loading-animation')

app/views/shared/groups/_search_form.html.haml

 = form_tag request.path, method: :get, class: "group-filter-form js-group-filter-form", id: 'group-filter-form' do |f|
-  = search_field_tag :filter, params[:filter], placeholder: s_('GroupsTree|Search by name'), class: 'group-filter-form-field form-control js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
+  = search_field_tag :filter, params[:filter], placeholder: s_('GroupsTree|Search by name'), class: 'group-filter-form-field form-control js-groups-list-filter qa-groups-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"

qa/qa/page/component/groups_filter.rb

@@ -6,8 +6,7 @@ module QA
       module GroupsFilter
         def self.included(base)
           base.view 'app/views/shared/groups/_search_form.html.haml' do
-            element :groups_filter, 'search_field_tag :filter'
-            element :groups_filter_placeholder, 'Search by name'
+            element :groups_filter
           end
 
           base.view 'app/views/shared/groups/_empty_state.html.haml' do
@@ -17,17 +16,48 @@ module QA
           base.view 'app/assets/javascripts/groups/components/groups.vue' do
             element :groups_list_tree_container
           end
+
+          base.view 'app/views/dashboard/groups/_groups.html.haml' do
+            element :loading_animation
+          end
         end
 
         private
 
-        def filter_by_name(name)
+        # Filter the list of groups/projects by name
+        # If submit is true the return key will be sent to the browser to reload
+        # the page and fetch only the filtered results
+        def filter_by_name(name, submit: false)
+          wait(reload: false) do
+            # Wait 0 for the empty state element because it is there immediately
+            # if there are no groups. Otherwise there's a loading indicator and
+            # then groups_list_tree_container appears, which might take longer
+            page.has_css?(element_selector_css(:groups_empty_state), wait: 0) ||
+              page.has_css?(element_selector_css(:groups_list_tree_container))
+          end
+
+          field = find_element :groups_filter
+          field.set(name)
+          field.send_keys(:return) if submit
+        end
+
+        def has_filtered_group?(name)
+          # Filter and submit to reload the page and only retrieve the filtered results
+          filter_by_name(name, submit: true)
+
+          # Since we submitted after filtering the absence of the loading
+          # animation and the presence of groups_list_tree_container means we
+          # have the complete filtered list of groups
           wait(reload: false) do
-            page.has_css?(element_selector_css(:groups_empty_state)) ||
+            page.has_no_css?(element_selector_css(:loading_animation)) &&
               page.has_css?(element_selector_css(:groups_list_tree_container))
           end
 
-          fill_in 'Search by name', with: name
+          # If there are no groups we'll know immediately because we filtered the list
+          return if page.has_text?(/No groups or projects matched your search/, wait: 0)
+
+          # The name will be present as filter input so we check for a link, not text
+          page.has_link?(name, wait: 0)
         end
       end
     end

qa/qa/page/dashboard/groups.rb

+# frozen_string_literal: true
+
 module QA
   module Page
     module Dashboard
@@ -14,9 +16,7 @@ module QA
         end
 
         def has_group?(name)
-          filter_by_name(name)
-
-          page.has_link?(name)
+          has_filtered_group?(name)
         end
 
         def go_to_group(name)

qa/qa/page/group/show.rb

+# frozen_string_literal: true
+
 module QA
   module Page
     module Group
@@ -25,11 +27,7 @@ module QA
         end
 
         def has_subgroup?(name)
-          filter_by_name(name)
-
-          page.has_text?(/#{name}|No groups or projects matched your search/, wait: 60)
-
-          page.has_text?(name, wait: 0)
+          has_filtered_group?(name)
         end
 
         def go_to_new_subgroup