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

@@ -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 }));
         }
       }
     },