commit: 1dd7120e1630531f46f9dd101b877c614a0475e5
parent: 99051f4a55376939a3161c9cdeac5fdb9d99915a
Author: Shpuld Shpludson <shp@cock.li>
Date: Sun, 24 Feb 2019 16:24:53 +0000
Merge branch 'issue-389-search-loading-icon' into 'develop'
#389: add loading icon in search panel
Closes #389
See merge request pleroma/pleroma-fe!610
Diffstat:
2 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
@@ -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
})
}
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
@@ -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>