2 files changed, 17 insertions, 6 deletions
diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
index 9c026276..55040826 100644
--- a/src/components/user_search/user_search.js
+++ b/src/components/user_search/user_search.js
@@ -1,8 +1,8 @@
-import UserCard from '../user_card/user_card.vue'
+import FollowCard from '../follow_card/follow_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 const userSearch = {
   components: {
-    UserCard
+    FollowCard
   },
   props: [
     'query'
@@ -10,7 +10,8 @@ const userSearch = {
   data () {
     return {
       username: '',
-      users: []
+      users: [],
+      loading: false
     }
   },
   mounted () {
@@ -24,14 +25,17 @@ const userSearch = {
   methods: {
     newQuery (query) {
       this.$router.push({ name: 'user-search', query: { query } })
+      this.$refs.userSearchInput.focus()
     },
     search (query) {
       if (!query) {
         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..1269eea6 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -4,13 +4,16 @@
       {{$t('nav.user_search')}}
     </div>
     <div class="user-search-input-container">
-      <input class="user-finder-input" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
+      <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
       <button class="btn search-button" @click="newQuery(username)">
         <i class="icon-search"/>
       </button>
     </div>
-    <div class="panel-body">
-      <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
+    <div v-if="loading" class="text-center loading-icon">
+      <i class="icon-spin3 animate-spin"/>
+    </div>
+    <div v-else class="panel-body">
+      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
     </div>
   </div>
 </template>
@@ -27,4 +30,8 @@
     margin-left: 0.5em;
   }
 }
+
+.loading-icon {
+  padding: 1em;
+}
 </style>