subtype/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

#389: add loading icon in search panel

Browse source
This commit is contained in:
dave 2019-02-22 13:37:02 -05:00
parent 99051f4a55
commit 9bedf96b98
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/user_search/user_search.js
View file

@ -10,7 +10,8 @@ const userSearch = {
data () { data () {
return { return {
username: '', username: '',
users: [] users: [],
loading: false
} }
}, },
mounted () { mounted () {
@ -30,8 +31,10 @@ const userSearch = {
this.users = [] this.users = []
return return
} }
this.loading = true
userSearchApi.search({query, store: this.$store}) userSearchApi.search({query, store: this.$store})
.then((res) => { .then((res) => {
this.loading = false
this.users = res this.users = res
}) })
} }

9
src/components/user_search/user_search.vue
View file

@ -9,7 +9,10 @@
<i class="icon-search"/> <i class="icon-search"/>
</button> </button>
</div> </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> <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
</div> </div>
</div> </div>
@ -27,4 +30,8 @@
margin-left: 0.5em; margin-left: 0.5em;
} }
} }
.loading-icon {
padding: 1em;
}
</style> </style>