Adjust todo button margin

Only show margin from the loading
spinner once it's visible.

app/assets/javascripts/pages/dashboard/todos/index/todos.js

@@ -96,6 +96,8 @@ export default class Todos {
     target.setAttribute('disabled', true);
     target.classList.add('disabled');
 
+    target.querySelector('.gl-spinner-container').classList.add('gl-mr-2');
+
     axios[target.dataset.method](target.dataset.href)
       .then(({ data }) => {
         this.updateRowState(target);
@@ -118,6 +120,8 @@ export default class Todos {
     target.removeAttribute('disabled');
     target.classList.remove('disabled');
 
+    target.querySelector('.gl-spinner-container').classList.remove('gl-mr-2');
+
     if (isInactive === true) {
       restoreBtn.classList.add('hidden');
       doneBtn.classList.remove('hidden');
@@ -140,6 +144,8 @@ export default class Todos {
     target.setAttribute('disabled', true);
     target.classList.add('disabled');
 
+    target.querySelector('.gl-spinner-container').classList.add('gl-mr-2');
+
     axios[target.dataset.method](target.dataset.href, {
       ids: this.todo_ids,
     })
@@ -163,6 +169,8 @@ export default class Todos {
     target.removeAttribute('disabled');
     target.classList.remove('disabled');
 
+    target.querySelector('.gl-spinner-container').classList.remove('gl-mr-2');
+
     this.todo_ids = target === markAllDoneBtn ? data.updated_ids : [];
     undoAllBtn.classList.toggle('hidden');
     markAllDoneBtn.classList.toggle('hidden');

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')
+          = gl_loading_icon(inline: true)
           Done
         = 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')
+          = gl_loading_icon(inline: true)
           Undo
       - 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')
+          = gl_loading_icon(inline: true)
           Add a to do

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

@@ -22,10 +22,10 @@
       - 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')
+            = gl_loading_icon(inline: true)
             = s_("Todos|Mark all as done")
           = 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')
+            = gl_loading_icon(inline: true)
             = s_("Todos|Undo mark all as done")
 
   .todos-filters