forked from AkkomaGang/akkoma-fe
#389: add loading icon in search panel
This commit is contained in:
parent
99051f4a55
commit
9bedf96b98
2 changed files with 12 additions and 2 deletions
|
@ -10,7 +10,8 @@ const userSearch = {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
username: '',
|
username: '',
|
||||||
users: []
|
users: [],
|
||||||
|
loading: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
@ -30,8 +31,10 @@ const userSearch = {
|
||||||
this.users = []
|
this.users = []
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
this.loading = true
|
||||||
userSearchApi.search({query, store: this.$store})
|
userSearchApi.search({query, store: this.$store})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
this.loading = false
|
||||||
this.users = res
|
this.users = res
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,10 @@
|
||||||
<i class="icon-search"/>
|
<i class="icon-search"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
<user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,4 +30,8 @@
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loading-icon {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue