pleroma-fe

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:
M
src/components/user_search/user_search.js
5
++++-
M
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
@@ -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>