Add: loading state; for button during fetchConnections

This commit is contained in:
Raphael Beer 2020-03-26 07:44:55 +01:00
parent d07bccfcaf
commit ee1d33d084
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11

View File

@ -16,7 +16,12 @@
</client-only> </client-only>
</ds-space> </ds-space>
<ds-space v-if="this.allConnectionsCount - this.connections.length" margin="small"> <ds-space v-if="this.allConnectionsCount - this.connections.length" margin="small">
<base-button @click="fetchConnections" size="small" color="softer"> <base-button
@click="fetchConnections"
:loading="this.isLoading"
size="small"
color="softer"
>
{{ {{
$t('profile.network.andMore', { $t('profile.network.andMore', {
number: this.allConnectionsCount - this.connections.length, number: this.allConnectionsCount - this.connections.length,
@ -69,6 +74,7 @@ export default {
return { return {
additionalConnections: [], additionalConnections: [],
filter: null, filter: null,
isLoading: false,
queries: { queries: {
followedBy: followedByQuery, followedBy: followedByQuery,
following: followingQuery, following: followingQuery,
@ -116,12 +122,14 @@ export default {
return uniqBy(items, field) return uniqBy(items, field)
}, },
async fetchConnections() { async fetchConnections() {
this.$set(this, 'isLoading', true)
const { data } = await this.$apollo.query({ const { data } = await this.$apollo.query({
query: this.queries[this.type], query: this.queries[this.type],
variables: { id: this.user.id }, variables: { id: this.user.id },
// neither result nor update are being called when defined here (?) // neither result nor update are being called when defined here (?)
}) })
this.additionalConnections = data.User[0][this.type] this.additionalConnections = data.User[0][this.type]
this.$set(this, 'isLoading', false)
}, },
setFilter(evt) { setFilter(evt) {
this.$set(this, 'filter', evt.target.value) this.$set(this, 'filter', evt.target.value)