fix: duplicate network calls on index page (#2085)

* Prevent extra recipe load on index page

* Prevent loading recipes with food for all components but search ones

* add missing change in search page

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -183,6 +183,10 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    skipLoad: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props, context) {
     const preferences = useUserSortPreferences();
@@ -233,6 +237,9 @@ export default defineComponent({
     const { fetchMore } = useLazyRecipes();
 
     onMounted(async () => {
+      if (props.skipLoad) {
+        return;
+      }
       const newRecipes = await fetchMore(
         page.value,
 

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -65,7 +65,7 @@ export default defineComponent({
   },
 
   setup(_, context) {
-    const { refreshRecipes } = useRecipes(true, false);
+    const { refreshRecipes } = useRecipes(true, false, true);
 
     const state = reactive({
       loading: false,

frontend/composables/recipes/use-recipes.ts

@@ -67,7 +67,7 @@ export const useLazyRecipes = function () {
   };
 };
 
-export const useRecipes = (all = false, fetchRecipes = true) => {
+export const useRecipes = (all = false, fetchRecipes = true, loadFood = false) => {
   const api = useUserApi();
 
   // recipes is non-reactive!!
@@ -88,7 +88,7 @@ export const useRecipes = (all = false, fetchRecipes = true) => {
   })();
 
   async function refreshRecipes() {
-    const { data } = await api.recipes.getAll(page, perPage, { loadFood: true, orderBy: "created_at" });
+    const { data } = await api.recipes.getAll(page, perPage, { loadFood, orderBy: "created_at" });
     if (data) {
       recipes.value = data.items;
     }

frontend/pages/index.vue

@@ -4,6 +4,7 @@
       :icon="$globals.icons.primary"
       :title="$t('general.recent')"
       :recipes="recentRecipes"
+      :skip-load="true"
     ></RecipeCardSection>
   </v-container>
 </template>

frontend/pages/search.vue

@@ -134,7 +134,7 @@ export default defineComponent({
     RecipeCardSection,
   },
   setup() {
-    const { assignSorted } = useRecipes(true);
+    const { assignSorted } = useRecipes(true, true, true);
 
     // ================================================================
     // Advanced Toggle