Add load button while waiting for Axios to finish.

Hi, how can I add a spinning icon while Axios is finishing a POST request? I am creating and updating a booking in one request and it takes 1-2 second and I don't want people to think nothing happens and start clicking the button again and again...

BUTTON

<form method="POST" @submit.prevent="createBooking($event)" v-else>
	<button type="submit">Greiða</button>
</form>


AXIOS CALL

axios.post('/api/booking/create', {
					name: this.booking.name,
					socialId: this.booking.socialId,
					email: this.booking.email,
					phone: this.booking.phone,

					carNumber: this.booking.carNumber,
					carSize: this.booking.carSize,
					carMake: this.booking.carMake,
					carType: this.booking.carType,
					carColor: this.booking.carColor,

					dropOffDate: dayjs(this.booking.dropOffDate).format('DD/MM/YYYY'),
					dropOffTime: this.booking.dropOffTime,
					pickUpDate: dayjs(this.booking.pickUpDate).format('DD/MM/YYYY'),
					pickUpTime: this.booking.pickUpTime,

					numberOfDays: this.booking.numberOfDays, 

					accepted_terms: this.booking.termsChecked,
					send_bill: this.booking.send_bill,

					checkedService: this.booking.checkedService,

					discountUsed: this.couponInput,

					priceForServices: this.servicesPrice,
					priceForStorage: this.daysPrice,
					price: this.finalPrice,
					
					randomKey: randomKey
				})
				.then(response => {
					axios.post('/api/booking/update', {
						reference: response.data.randomKey
					})
					.then(response => {
						window.location.href = '/?status=1';
					});
				})
				.catch(function (error) {
					alert('Aðgerð tókst ekki!');

					console.log(error);

					return false;
				});

Sergiu17

5 years ago

Best Answer

Level 60

Hi, you need a flag for this

// html
<div class='spinner' v-if='isLoading'></div>

<button :disabled='isLoading' type='submit'>Greiða</button>

// js
data: () => {
	return {
		// show spinning icon if isLoading = true
		// by default set it to false
		isLoading: false,
	}
},

methods: {
	createBooking() {
		// set to true, 
		isLoading = true;
		axios.post()
			.then(() =>{})
			.catch(() => {})
			.finally(() => {
				isLoading = false;
			});
	}
},

Please or to participate in this conversation.