fix: Optimize Recipe Timeline Requests (#5811)

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -3,7 +3,10 @@
     <v-expand-transition>
       <v-card
         :ripple="false"
-        :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
+        :class="[
+          isFlat ? 'mx-auto flat' : 'mx-auto',
+          { 'disable-highlight': disableHighlight },
+        ]"
         :style="{ cursor }"
         hover
         height="100%"
@@ -181,6 +184,10 @@ export default defineNuxtComponent({
       type: [Number],
       default: 150,
     },
+    disableHighlight: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["selected", "delete"],
   setup(props) {
@@ -241,4 +248,8 @@ export default defineNuxtComponent({
   box-shadow: none !important;
   background-color: transparent !important;
 }
+
+.disable-highlight :deep(.v-card__overlay) {
+  opacity: 0 !important;
+}
 </style>

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -242,28 +242,28 @@ export default defineNuxtComponent({
       alert.success(i18n.t("events.event-deleted") as string);
     };
 
-    async function getRecipe(recipeId: string): Promise<Recipe | null> {
-      const { data } = await api.recipes.getOne(recipeId);
-      return data;
+    async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
+      const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+      const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
+      return data?.items || [];
     };
 
     async function updateRecipes(events: RecipeTimelineEventOut[]) {
-      const recipePromises: Promise<Recipe | null>[] = [];
-      const seenRecipeIds: string[] = [];
+      const recipeIds: string[] = [];
       events.forEach((event) => {
-        if (seenRecipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
+        if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
           return;
         }
 
-        seenRecipeIds.push(event.recipeId);
-        recipePromises.push(getRecipe(event.recipeId));
+        recipeIds.push(event.recipeId);
       });
 
-      const results = await Promise.all(recipePromises);
+      const results = await getRecipes(recipeIds);
       results.forEach((result) => {
-        if (result && result.id) {
-          recipes.set(result.id, result);
+        if (!result?.id) {
+          return;
         }
+        recipes.set(result.id, result);
       });
     }
 

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -53,6 +53,7 @@
         <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%">
           <v-col align-self="center" class="pa-0">
             <RecipeCardMobile
+              disable-highlight
               :vertical="useMobileFormat"
               :name="recipe.name"
               :slug="recipe.slug"