Merge pull request #5410 from nextcloud/fix/booking-loading

Fix appointment booking loading

src/components/Appointments/AppointmentDetails.vue

@@ -59,7 +59,7 @@
 				</div>
 				<div class="buttons">
 					<NcLoadingIcon v-if="isLoading" :size="32" class="loading-icon" />
-					<NcButton type="primary" @click="save" :disabled="isLoading">
+					<NcButton type="primary" :disabled="isLoading" @click="save">
 						{{ $t('calendar', 'Book the appointment') }}
 					</NcButton>
 				</div>
@@ -114,14 +114,17 @@ export default {
 			required: true,
 			type: Boolean,
 		},
+		isLoading: {
+			required: true,
+			type: Boolean,
+		},
 	},
 	data() {
 		return {
 			description: '',
 			email: this.visitorInfo.email,
 			displayName: this.visitorInfo.displayName,
 			timeZone: this.timeZoneId,
-			isLoading: false,
 		}
 	},
 	computed: {
@@ -133,21 +136,15 @@ export default {
 		},
 	},
 	methods: {
-		async save() {
-			this.canClose = false
-			this.isLoading = true
-			try {
-				await this.$emit('save', {
-					slot: this.timeSlot,
-					description: this.description,
-					email: this.email,
-					displayName: this.displayName,
-					timeZone: this.timeZone,
-				})
-			} finally {
-				this.canClose = true
-				this.isLoading = false
-			}
+		 save() {
+			this.$emit('save', {
+				slot: this.timeSlot,
+				description: this.description,
+				email: this.email,
+				displayName: this.displayName,
+				timeZone: this.timeZone,
+			})
+
 		},
 	},
 }

src/views/Appointments/Booking.vue

@@ -75,6 +75,7 @@
 					:visitor-info="visitorInfo"
 					:time-zone-id="timeZone"
 					:show-error="bookingError"
+					:is-loading="bookingLoading"
 					@save="onSave"
 					@close="selectedSlot = undefined" />
 			</div>
@@ -153,6 +154,7 @@ export default {
 			selectedSlot: undefined,
 			bookingConfirmed: false,
 			bookingError: false,
+			bookingLoading: false,
 		}
 	},
 	watch: {
@@ -204,6 +206,7 @@ export default {
 			}
 		},
 		async onSave({ slot, displayName, email, description, timeZone }) {
+			this.bookingLoading = true
 			console.info('slot will be booked', {
 				slot,
 				description,
@@ -223,7 +226,10 @@ export default {
 			} catch (e) {
 				console.error('could not book appointment', e)
 				this.bookingError = true
+			} finally {
+				this.bookingLoading = false
 			}
+
 		},
 		onSlotClicked(slot) {
 			this.selectedSlot = slot