Merge branch 'pb-migrate-bulk-spinners' into 'master'

Migrate loading spinners to be design system compliant

See merge request gitlab-org/gitlab!82236

app/views/dashboard/todos/_todo.html.haml

@@ -50,12 +50,12 @@
     .todo-actions.gl-ml-3
       - if todo.pending?
         = link_to dashboard_todo_path(todo), method: :delete, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-done-todo', data: { href: dashboard_todo_path(todo) } do
+          = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
           Done
-          %span.gl-spinner.ml-1
         = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-undo-todo hidden', data: { href: restore_dashboard_todo_path(todo) } do
+          = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
           Undo
-          %span.gl-spinner.ml-1
       - else
         = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-add-todo', data: { href: restore_dashboard_todo_path(todo) } do
+          = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
           Add a to do
-          %span.gl-spinner.ml-1

app/views/dashboard/todos/index.html.haml

@@ -22,11 +22,11 @@
       - if @allowed_todos.any?(&:pending?)
         .gl-mr-3
           = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'gl-button btn btn-default btn-loading align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
+            = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
             = s_("Todos|Mark all as done")
-            %span.gl-spinner.ml-1
           = link_to bulk_restore_dashboard_todos_path, class: 'gl-button btn btn-default btn-loading align-items-center js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
+            = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
             = s_("Todos|Undo mark all as done")
-            %span.gl-spinner.ml-1
 
   .todos-filters
     .issues-details-filters.row-content-block.second-block

app/views/projects/blob/_editor.html.haml

@@ -45,5 +45,4 @@
     - if local_assigns[:path]
       .js-edit-mode-pane#preview.hide
         .center
-          %h2
-            %i.icon-spinner.icon-spin
+          = gl_loading_icon(size: 'lg')

app/views/projects/blob/_upload.html.haml

@@ -20,8 +20,8 @@
           = render 'shared/new_commit_form', placeholder: placeholder, ref: local_assigns[:ref]
 
           .form-actions
-            = button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
-              .gl-spinner.gl-mr-2.js-loading-icon.hidden
+            = button_tag class: 'btn gl-button btn-confirm btn-upload-file gl-mr-2', id: 'submit-all', type: 'button' do
+              = gl_loading_icon(inline: true, css_class: 'gl-mr-2 js-loading-icon hidden')
               = button_title
             = link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
 

app/views/projects/commit/_commit_box.html.haml

@@ -37,13 +37,13 @@
     - @commit.parents.each do |parent|
       = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
     .commit-info.branches
-      .gl-spinner.vertical-align-middle
+      = gl_loading_icon(inline: true, css_class: 'gl-vertical-align-middle')
 
   .well-segment.merge-request-info
     .icon-container
       = custom_icon('mr_bold')
     %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
-      .gl-spinner.vertical-align-middle
+      = gl_loading_icon(inline: true, css_class: 'gl-vertical-align-middle')
 
   - if can?(current_user, :read_pipeline, @last_pipeline)
     .well-segment.pipeline-info

app/views/projects/edit.html.haml

@@ -107,6 +107,6 @@
 .save-project-loader.hide
   .center
     %h2
-      .gl-spinner.gl-spinner-md.align-text-bottom
+      = gl_loading_icon(inline: true, size: 'md', css_class: 'gl-vertical-align-middle')
       = _('Saving project.')
     %p= _('Please wait a moment, this page will automatically refresh when ready.')