fix: Back button sets view to where you left page (#7370)

Co-authored-by: Michael Genson <genson.michael@gmail.com>

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -160,13 +160,13 @@
         </v-row>
       </div>
       <v-card v-intersect="infiniteScroll" />
-      <v-fade-transition>
-        <AppLoader
-          v-if="loading"
-          :loading="loading"
-        />
-      </v-fade-transition>
     </div>
+    <v-fade-transition>
+      <AppLoader
+        v-if="loading"
+        :loading="loading"
+      />
+    </v-fade-transition>
   </div>
 </template>
 
@@ -243,6 +243,7 @@ const ready = ref(false);
 const loading = ref(false);
 
 const { fetchMore, getRandom } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
+const { savePosition, getSavedPage, restorePosition } = useScrollPosition();
 const router = useRouter();
 
 const queryFilter = computed(() => {
@@ -283,8 +284,29 @@ async function fetchRecipes(pageCount = 1) {
 }
 
 onMounted(async () => {
-  await initRecipes();
-  ready.value = true;
+  loading.value = true;
+  const savedPage = getSavedPage(route.path);
+
+  if (savedPage && savedPage > 2) {
+    page.value = 1;
+    hasMore.value = true;
+    const newRecipes = await fetchRecipes(savedPage);
+    if (newRecipes.length < perPage * savedPage) {
+      hasMore.value = false;
+    }
+    page.value = savedPage;
+    emit(REPLACE_RECIPES_EVENT, newRecipes);
+    ready.value = true;
+    restorePosition(route.path);
+  }
+  else {
+    await initRecipes();
+    ready.value = true;
+    if (savedPage) {
+      restorePosition(route.path);
+    }
+  }
+  loading.value = false;
 });
 
 let lastQuery: string | undefined = JSON.stringify(props.query);
@@ -337,6 +359,8 @@ const infiniteScroll = useThrottleFn(async () => {
     emit(APPEND_RECIPES_EVENT, newRecipes);
   }
 
+  savePosition(route.path, page.value);
+
   loading.value = false;
 }, 500);