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"

frontend/pages/g/[groupSlug]/recipes/timeline.vue

@@ -16,7 +16,10 @@
         {{ $t("recipe.group-global-timeline", { groupName }) }}
       </template>
     </BasePageTitle>
-    <v-sheet :class="$vuetify.display.smAndDown ? 'pa-0' : 'px-3 py-0'">
+    <v-sheet
+      :class="$vuetify.display.smAndDown ? 'pa-0' : 'px-3 py-0'"
+      style="background-color: transparent;"
+    >
       <RecipeTimeline
         v-if="queryFilter"
         v-model="ready"