Update spinners in group list component

app/assets/javascripts/groups/components/app.vue

@@ -244,7 +244,7 @@ export default {
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('GroupsTree|Loading groups')"
-      :size="2"
+      size="md"
       class="loading-animation prepend-top-20"
     />
     <groups-component

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')
+    .loading-container.text-center.prepend-top-20
+      .spinner.spinner-md

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

 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_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')
+    .loading-container.text-center.prepend-top-20
+      .spinner.spinner-md

app/views/groups/_archived_projects.html.haml

@@ -4,5 +4,5 @@
 
   %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
-      .loading-container.text-center
-        = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')
+      .loading-container.text-center.prepend-top-20
+        .spinner.spinner-md

app/views/groups/_shared_projects.html.haml

@@ -4,5 +4,5 @@
 
   %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
-      .loading-container.text-center
-        = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')
+      .loading-container.text-center.prepend-top-20
+        .spinner.spinner-md

app/views/groups/_subgroups_and_projects.html.haml

@@ -4,5 +4,5 @@
 
   %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
-      .loading-container.text-center
-        = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')
+      .loading-container.text-center.prepend-top-20
+        .spinner.spinner-md

changelogs/unreleased/52366-improved-group-lists-ui-spinners.yml

+---
+title: Update spinners in group list component
+merge_request: 26572
+author:
+type: changed