Show spinner and disable buttons on form submit in notifications list

There was no feedback to the user when marking notifications
as read and unread. When marking a bigger amount of notifications
it can take a bit to update the view, which might lead to addtional
submit attempts. By showing a spinner and disabling the button
we can prevent this from happening.

Co-authored-by: Eduardo Navarro <enavarro@suse.com>

src/api/app/assets/javascripts/webui/notification.js

@@ -29,4 +29,3 @@ function handleNotificationCheckboxSelection() { // jshint ignore:line
     setCheckboxCounterAndSubmitButton();
   });
 }
-

src/api/app/views/webui/users/notifications/_notification_action_bar.html.haml

@@ -5,6 +5,9 @@
         .custom-control.custom-checkbox
           = check_box_tag('select-all-notifications', 1, false, class: 'custom-control-input')
           %label.custom-control-label.align-middle.mr-4#select-all-label{ for: 'select-all-notifications' } Select All
-          - button_text = type == 'read' ? "Mark as 'Unread'" : "Mark as 'Read'"
-          = button_tag(type: 'submit', class: 'btn btn-sm btn-outline-success px-3', id: 'done-button', disabled: 'disabled') do
+          :ruby
+            button_text = type == 'read' ? "Mark as 'Unread'" : "Mark as 'Read'"
+            disable_with_content = button_text + tag.i(class: 'fas fa-spinner fa-spin ml-2')
+          = button_tag(type: 'submit', class: 'btn btn-sm btn-outline-success px-3', id: 'done-button', disabled: 'disabled',
+                       'data-disable-with': disable_with_content) do
             = button_text

src/api/app/views/webui/users/notifications/_notifications_list.html.haml

@@ -43,12 +43,14 @@
                         = link_to(notification.notifiable_link[:text], notification.notifiable_link[:path], class: 'mx-1')
                         %small.text-nowrap #{time_ago_in_words(notification.created_at)} ago
                     .col-auto.actions.ml-auto.align-self-end.align-self-md-start
-                      - title, icon = notification.unread? ? ['Mark as "Read"', 'fa-check'] : ['Mark as "Unread"', 'fa-undo']
-                      - update_path = my_notifications_path(notification_ids: [notification.id], type: selected_filter[:type],
+                      :ruby
+                        title, icon = notification.unread? ? ['Mark as "Read"', 'fa-check'] : ['Mark as "Unread"', 'fa-undo']
+                        update_path = my_notifications_path(notification_ids: [notification.id], type: selected_filter[:type],
                                                             project: selected_filter[:project], page: params[:page],
                                                             show_all: params[:show_all])
                       = link_to(update_path, id: format('update-notification-%d', notification.id),
-                                method: :put, class: 'btn btn-sm btn-outline-success px-3', title: title, remote: true) do
+                                method: :put, class: 'btn btn-sm btn-outline-success px-3', title: title,
+                                data: { remote: true, 'disable-with': tag.i(class: 'fas fa-spinner fa-spin') }) do
                         %i.fas{ class: "#{icon}" }
                   .row.mt-1.pl-sm-4
                     .col-auto.pr-0