#389: add loading icon in search panel

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
         })
     }

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>