chore: merge develop into working branch

src/.vuepress/components/Footer.vue

@@ -85,13 +85,29 @@
         cols="12"
       >
         <!-- TODO: provide translation -->
-        © {{ new Date().getFullYear() }} – Ahiqar - The syriac and arabic Ahiqar Texts
+        © {{ new Date().getFullYear() }} – Ahiqar - The syriac and arabic Ahiqar Texts (<a href="https://gitlab.gwdg.de/subugoe/ahiqar/website/-/blob/main/CHANGELOG.md" class="grey--text text--lighten-3 text-decoration-none" target="_blank">v{{ version }}</a>)
       </v-col>
     </v-row>
 </v-container>
   </v-footer>
 </template>
 
+<script>
+import { version } from '../../../package.json';
+
+export default {
+  data() {
+    return {
+      version: '',
+    }
+  },
+  created() {
+    this.version = version;
+  }
+}
+</script>
+
+
 <style lang="scss" scoped>
 .v-tab {
   font-size: 75%;

src/.vuepress/components/SearchPage.vue

@@ -2,16 +2,25 @@
   <div>
     <SearchInput @search="onSearchInput" />
     <!-- #TODO: add translation -->
-    <p
-      v-if="total > 0"
-      class=""
-    >Found a total of <code class="font-weight-black">{{ total }}</code>
+    <p v-if="total > 0">
+      Found a total of <code class="font-weight-black">{{ total }}</code>
       {{ 'Hit' | numerus(total) }} for <code class="font-weight-black">{{ query }}</code>
       in <code class="font-weight-black">{{ uniqueSheets }}</code> {{ 'Sheet' | numerus(uniqueSheets) }}
       and <code class="font-weight-black">{{ uniqueManuscripts }}</code> {{ 'Manuscript' | numerus(uniqueManuscripts) }}.
     </p>
 
-    <SearchResultList :hit-counter="hitCounter" :items="items" />
+    <div
+      v-if="loading"
+      class="loading-wrapper py-10"
+      >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
+    </div>
+
+    <SearchResultList v-else :hit-counter="hitCounter" :items="items" />
 
     <div
       class="text-center"
@@ -39,12 +48,13 @@ export default {
   },
   data() {
     return {
-      query: '',
       hitCounter: 0,
       items: [],
+      loading: false,
+      page: 1,
+      query: '',
       size: 20,
       total: 0,
-      page: 1,
     };
   },
   watch: {
@@ -59,7 +69,8 @@ export default {
     page: function() {
       const from = this.size * (this.page - 1);
       this.search(this.query, from, this.size);
-    },
+      this.loading = true;
+    }
   },
   computed: {
     pagesAmount() {
@@ -90,19 +101,30 @@ export default {
     onSearchInput(query) {
       this.query = query;
       this.page = 1;
+
       this.search(this.query, 0, this.size)
     },
     async search(value, from, size) {
       this.hitCounter = from + 1;
 
-      const searchResponse = await apiService.search(value, from, size);
+      try {
+        this.items = [];
+        this.total = 0;
 
-      if (searchResponse) {
+        this.loading = true;
+
+        const searchResponse = await apiService.search(value, from, size);
         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 }));
         }
+      } catch(error) {
+          this.items = [];
+          this.total = 0;
+      } finally {
+        this.loading = false;
       }
     },
     scrollUp() {
@@ -115,3 +137,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.loading-wrapper {
+  text-align: center;
+}
+</style>