From fc29c0724d0b5c751c4ac2277fc20a8119548c98 Mon Sep 17 00:00:00 2001
From: schneider210 <frank.schneider@sub.uni-goettingen.de>
Date: Tue, 10 Aug 2021 10:45:05 +0200
Subject: [PATCH] feat: add circular progress to the search list
renders unless the promise returned by axios is fulfilled; shows search results otherwise
---
src/.vuepress/components/SearchPage.vue | 19 +++++++++++++++----
1 file changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/.vuepress/components/SearchPage.vue b/src/.vuepress/components/SearchPage.vue
index aad751e..9a31840 100644
--- a/src/.vuepress/components/SearchPage.vue
+++ b/src/.vuepress/components/SearchPage.vue
@@ -6,7 +6,13 @@
class="text-overline mb-0"
>{{total}} Results</p>
- <SearchResultList :items="items" />
+ <v-progress-circular
+ v-if="loading"
+ color="primary"
+ indeterminate
+ />
+
+ <SearchResultList v-else :items="items" />
<div
class="text-center"
@@ -34,11 +40,12 @@ export default {
},
data() {
return {
- query: '',
items: [],
+ loading: false,
+ page: 1,
+ query: '',
size: 20,
total: 0,
- page: 1,
}
},
watch:{
@@ -53,6 +60,7 @@ export default {
page: function() {
const from = this.size * (this.page - 1);
this.search(this.query, from, this.size);
+ this.loading = true;
}
},
computed: {
@@ -67,13 +75,16 @@ export default {
this.search(this.query, 0, this.size)
},
async search(value, from, size) {
+ this.loading = true;
const searchResponse = await apiService.search(value, from, size);
if (searchResponse) {
+ this.loading = false;
const items = searchResponse.hits?.hits;
+
if (items) {
this.total = searchResponse.hits?.total.value || 0;
- this.items = items.map(x=>({...x, searchTerm: value}));
+ this.items = items.map(x => ({ ...x, searchTerm: value }));
}
}
},
--
GitLab