#389: add loading icon in search panel

This commit is contained in:
dave 2019-02-22 13:37:02 -05:00
parent 99051f4a55
commit 9bedf96b98
2 changed files with 12 additions and 2 deletions

View File

@ -10,7 +10,8 @@ const userSearch = {
data () {
return {
username: '',
users: []
users: [],
loading: false
}
},
mounted () {
@ -30,8 +31,10 @@ const userSearch = {
this.users = []
return
}
this.loading = true
userSearchApi.search({query, store: this.$store})
.then((res) => {
this.loading = false
this.users = res
})
}

View File

@ -9,7 +9,10 @@
<i class="icon-search"/>
</button>
</div>
<div class="panel-body">
<div v-if="loading" class="text-center loading-icon">
<i class="icon-spin3 animate-spin"/>
</div>
<div v-else class="panel-body">
<user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
</div>
</div>
@ -27,4 +30,8 @@
margin-left: 0.5em;
}
}
.loading-icon {
padding: 1em;
}
</style>