#389: add loading icon in search panel

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>