From 66f37be47816346f233846b262738f95352e2cab Mon Sep 17 00:00:00 2001
From: Vladimir Kurlaev <vladimir.kurlaev.97@gmail.com>
Date: Wed, 16 Aug 2023 18:47:06 +0700
Subject: [PATCH 1/2] added loading with pages

---
 frontend/constants/global.ts  |  3 ++-
 frontend/pages/index.vue      | 12 ++++++------
 frontend/stores/list.store.ts | 10 +++++-----
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/constants/global.ts b/frontend/constants/global.ts
index 0fc2a820..5f3c66cd 100644
--- a/frontend/constants/global.ts
+++ b/frontend/constants/global.ts
@@ -1,3 +1,4 @@
-export const maxRequests: number = 1
+export const maxRequests: number = 20
+export const pagesToLoad: number = 1
 export const minItemCardSize: number = 336
 export const distanceToLoadEvents: number = 10
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4a332a2a..9d1843d2 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -3,7 +3,7 @@ import { RouteNameEnum } from '@/constants/enums/route';
 import { useModal } from 'vue-final-modal';
 import NeedAuthorize from '@/components/modal/NeedAuthorize.vue';
 import EventModal from '@/components/modal/Event.client.vue';
-import { maxRequests, minItemCardSize, distanceToLoadEvents } from '@/constants/global';
+import { maxRequests, minItemCardSize, distanceToLoadEvents, pagesToLoad } from '@/constants/global';
 import { type EventOnPoster } from '../../common/types';
 import { useListStore } from '~/stores/list.store';
 
@@ -44,14 +44,14 @@ const debouncedEventsRequestQuery = refDebounced(
 );
 
 const posterEvents: Ref<EventOnPoster[] | null> = ref(listStore.events);
-const requestLimit = ref(listStore.eventRequestLimit);
+const requestPages = ref(listStore.eventRequestPages);
 const hasMorePages = ref(true);
 const now = Date.now();
 
 watch(
-	[() => listStore.eventRequestLimit, () => listStore.events],
+	[() => listStore.eventRequestPages, () => listStore.events],
 	() => {
-		requestLimit.value = listStore.eventRequestLimit;
+		requestPages.value = listStore.eventRequestPages;
 		posterEvents.value = listStore.events;
 	}
 );
@@ -69,7 +69,7 @@ onMounted(async () => {
 const loadPosterEvents = async () => {
 	const query = {
 		...debouncedEventsRequestQuery.value,
-		paginationOptions: { limit: requestLimit.value }
+		paginationOptions: { limit: maxRequests, page: requestPages }
 	};
 	const { data } = await apiRouter.events.findMany.useQuery({
 		data: {
@@ -83,7 +83,7 @@ const loadPosterEvents = async () => {
 		listStore.$patch({
 			events: data.value.docs
 		});
-		hasNextPage ? listStore.incrementRequestLimit(maxRequests) : null;
+		hasNextPage ? listStore.incrementRequestPages(pagesToLoad) : null;
 	}
 };
 
diff --git a/frontend/stores/list.store.ts b/frontend/stores/list.store.ts
index 19289b47..49d5783c 100644
--- a/frontend/stores/list.store.ts
+++ b/frontend/stores/list.store.ts
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
-import { maxRequests } from '@/constants/global'
+import { pagesToLoad } from '@/constants/global'
 import type { EventOnPoster } from '../../common/types'
 
 type lastAction = 'NONE' | 'INDEX' | 'HEADER'
 
 type listStore = { 
   needScrollList: boolean,
-  eventRequestLimit: number,
+  eventRequestPages: number,
   events: EventOnPoster[] | null,
   scrollTop: number,
   lastAction: lastAction
@@ -15,14 +15,14 @@ type listStore = {
 export const useListStore = defineStore('eventList', {
   state: (): listStore => ({ 
     needScrollList: false,
-    eventRequestLimit: maxRequests,
+    eventRequestPages: pagesToLoad,
     events: [],
     scrollTop: 0,
     lastAction: 'NONE'
   }),
   actions: {
-    incrementRequestLimit(maxRequests: number) {
-      this.eventRequestLimit += maxRequests
+    incrementRequestPages(pagesToLoad: number) {
+      this.eventRequestPages += pagesToLoad
     }
   }
 })
\ No newline at end of file

From 526df898e76ef897b452433c26ad7c5f10959d32 Mon Sep 17 00:00:00 2001
From: Vladimir Kurlaev <vladimir.kurlaev.97@gmail.com>
Date: Wed, 16 Aug 2023 19:06:55 +0700
Subject: [PATCH 2/2] added prerender props

---
 frontend/components/common/ScrollingPage.vue | 5 +++++
 frontend/pages/index.vue                     | 1 +
 2 files changed, 6 insertions(+)

diff --git a/frontend/components/common/ScrollingPage.vue b/frontend/components/common/ScrollingPage.vue
index 2c6b6f7b..404ace8a 100644
--- a/frontend/components/common/ScrollingPage.vue
+++ b/frontend/components/common/ScrollingPage.vue
@@ -41,6 +41,10 @@ const props = defineProps({
 	hasNextPage: {
 		type: Boolean as PropType<boolean>,
 		required: true
+	},
+	prerender: {
+		type: Number as PropType<number>,
+		required: true 
 	}
 });
 
@@ -124,6 +128,7 @@ const sizeDependenciesFormatter = (item: NestedEventOnPoster): Array<string> =>
 			:min-item-size="minItemSize"
 			:buffer="buffer"
 			:page-mode="isPageMode"
+			:prerender="prerender"
 			class="scroll-list__content"
 		>
 			<template #before>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 9d1843d2..f58d3ea6 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -103,6 +103,7 @@ const onButtonClick = () => {
 			:min-item-size="minItemCardSize"
 			:distance="distanceToLoadEvents"
 			:has-next-page="hasMorePages"
+			:prerender="maxRequests"
 			:size-dependencies="[
 				'description',
 				'title',