From 9bedf96b98e114ed3a1910aaaca09b95be2113bf Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Fri, 22 Feb 2019 13:37:02 -0500
Subject: [PATCH] #389: add loading icon in search panel
---
src/components/user_search/user_search.js | 5 ++++-
src/components/user_search/user_search.vue | 9 ++++++++-
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
index 9c026276..be6c3bd7 100644
--- 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
index 3c2bd3fb..0b03d98a 100644
--- 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>