add the spinner to the CoachesList

This commit is contained in:
Andreas Zweili 2021-07-28 17:09:10 +02:00
parent 0f04ac7a3e
commit 0317b58706
1 changed files with 11 additions and 5 deletions

View File

@ -6,11 +6,14 @@
<section> <section>
<div class="controls"> <div class="controls">
<base-button mode="outline" @click="loadCoaches">Refresh</base-button> <base-button mode="outline" @click="loadCoaches">Refresh</base-button>
<base-button v-if="!isCoach" link to="/register" <base-button v-if="!isCoach && !isLoading" link to="/register"
>Register as Coach</base-button >Register as Coach</base-button
> >
</div> </div>
<ul v-if="hasCoaches"> <div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<ul v-else-if="hasCoaches">
<coach-item <coach-item
v-for="coach in filteredCoaches" v-for="coach in filteredCoaches"
:key="coach.id" :key="coach.id"
@ -34,6 +37,7 @@ export default {
components: { CoachItem, CoachFilter }, components: { CoachItem, CoachFilter },
data() { data() {
return { return {
isLoading: false,
activeFilters: { activeFilters: {
backend: true, backend: true,
frontend: true, frontend: true,
@ -61,7 +65,7 @@ export default {
}); });
}, },
hasCoaches() { hasCoaches() {
return this.$store.getters['coaches/hasCoaches']; return !this.isLoading && this.$store.getters['coaches/hasCoaches'];
} }
}, },
created() { created() {
@ -71,8 +75,10 @@ export default {
setFilter(updatedFilters) { setFilter(updatedFilters) {
this.activeFilters = updatedFilters; this.activeFilters = updatedFilters;
}, },
loadCoaches() { async loadCoaches() {
this.$store.dispatch('coaches/loadCoaches'); this.isLoading = true;
await this.$store.dispatch('coaches/loadCoaches');
this.isLoading = false;
} }
} }
}; };