Fix/1891 nasty flashing when finishing xhr requests

CHANGELOG.md

@@ -42,7 +42,8 @@
 - Fix English grammar in translatable string
   [#1907](https://github.com/nextcloud/cookbook/pull/1907) @rakekniven
 - Fix flashing pages on fast internet connections. See [#1891]((https://github.com/nextcloud/cookbook/issues/1891))
-  [#1896](https://github.com/nextcloud/cookbook/pull/1896) @seyfeb
+  [#1896](https://github.com/nextcloud/cookbook/pull/1896)
+ [#1918](https://github.com/nextcloud/cookbook/pull/1918)@seyfeb
 - Less strict character matching when filtering `RecipeList`, ignoring accents and some letters. Closes [#1870]((https://github.com/nextcloud/cookbook/issues/1870))
   [#1896](https://github.com/nextcloud/cookbook/pull/1896) @seyfeb
 - Make API interface cleaner by only using string identifiers for recipes

src/components/SearchResults.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <recipe-list :recipes="results" />
+        <RecipeList :recipes="results" :loading="isLoadingRecipeList" />
     </div>
 </template>
 
@@ -31,6 +31,11 @@ const props = defineProps({
  * @type {import('vue').Ref<boolean>}
  */
 const isComponentActive = ref(true);
+/**
+ * If the list of recipes is currently being fetched from the server.
+ * @type {import('vue').Ref<boolean>}
+ */
+const isLoadingRecipeList = ref(false);
 /**
  * @type {import('vue').Ref<Array>}
  */
@@ -50,6 +55,7 @@ const setup = async () => {
         // Search by tags
         const tags = route.params.value;
         try {
+            isLoadingRecipeList.value = true;
             const response = await api.recipes.allWithTag(tags);
             results.value = response.data;
         } catch (e) {
@@ -65,11 +71,14 @@ const setup = async () => {
             if (e && e instanceof Error) {
                 throw e;
             }
+        } finally {
+            isLoadingRecipeList.value = false;
         }
     } else if (props.query === 'cat') {
         // Search by category
         const cat = route.params.value;
         try {
+            isLoadingRecipeList.value = true;
             const response = await api.recipes.allInCategory(cat);
             results.value = response.data;
         } catch (e) {
@@ -85,10 +94,13 @@ const setup = async () => {
             if (e && e instanceof Error) {
                 throw e;
             }
+        } finally {
+            isLoadingRecipeList.value = false;
         }
     } else {
         // General search
         try {
+            isLoadingRecipeList.value = true;
             const response = await api.recipes.search(route.params.value);
             results.value = response.data;
         } catch (e) {
@@ -99,6 +111,8 @@ const setup = async () => {
             if (e && e instanceof Error) {
                 throw e;
             }
+        } finally {
+            isLoadingRecipeList.value = false;
         }
         store.dispatch('setPage', { page: 'search' });
     }