Implementing a loading spinner condition using Vuex to manage loading = true/false across multiple components.
LoadingSpinner.vue
<template>
<fulfilling-square-spinner
v-show="loading"
class="loading-spinner"
:animation-duration="4000"
:size="50"
color="#007bff"
/>
</template>
<script>
import { FulfillingSquareSpinner } from 'epic-spinners';
import { mapState } from 'vuex';
export default {
components: {
FulfillingSquareSpinner
},
computed: {
...mapState({}),
loading: function() {
return this.$store.state.isLoading;
}
},
}
</script>
<style lang="scss" scoped>
.loading-spinner {
z-index: 1;
position: absolute;
top: 315px;
left: 0;
right: 0;
margin: auto;
}
</style>
Utilizing a third-party loading spinner called Epic Spinners, which is wrapped up for consistent styling and positioning on various components.
Below is the store setup for the LoadingSpinner:
const state = {
data() {
return {
isLoading: false
}
},
};
const getters = {};
const actions = {};
const mutations = {
loading(state, isLoading) {
console.log({isLoading})
if (isLoading) {
state.isLoading = true;
} else {
state.isLoading = false;
}
}
};
export default {
state,
getters,
actions,
mutations,
};
The goal is to toggle the spinner to true before an axios call starts and then back to false when axios finishes.
this.$store.commit('loading', true);
or
this.$store.commit('loading', false);
The issue currently is that the spinner is not reactive and does not toggle between true or false.
The computed property defined inside LoadingSpinner.vue is undefined.