Display loading symbols when changing participations with multi actions

aleksis/apps/alsijil/frontend/components/coursebook/absences/ManageStudentsDialog.vue

@@ -27,6 +27,7 @@ export default {
     return {
       dialog: false,
       search: "",
+      loadSelected: false,
       selected: [],
       isExpanded: false,
     };
@@ -96,6 +97,16 @@ export default {
         // },
       );
     },
+    handleMultipleAction(absenceReasonId) {
+      this.loadSelected = true;
+      this.sendToServer(this.selected, "absenceReason", absenceReasonId);
+      this.$once("save", this.resetMultipleAction);
+    },
+    resetMultipleAction() {
+      this.loadSelected = false;
+      this.$set(this.selected, []);
+      this.$refs.iterator.selected = [];
+    },
   },
 };
 </script>
@@ -141,6 +152,7 @@ export default {
     </template>
     <template #content>
       <slide-iterator
+        ref="iterator"
         v-model="selected"
         :items="items"
         :search="search"
@@ -148,7 +160,9 @@ export default {
           (item) => 'documentation-' + documentation.id + '-student-' + item.id
         "
         :is-expanded.sync="isExpanded"
-        :loading="loadingIndicator"
+        :loading="loadingIndicator || loadSelected"
+        :load-only-selected="loadSelected"
+        :disabled="loading"
       >
         <template #listItemContent="{ item }">
           <v-list-item-title>