Feature/582 add loading events

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>

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

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;
 	}
 };
 
@@ -103,6 +103,7 @@ const onButtonClick = () => {
 			:min-item-size="minItemCardSize"
 			:distance="distanceToLoadEvents"
 			:has-next-page="hasMorePages"
+			:prerender="maxRequests"
 			:size-dependencies="[
 				'description',
 				'title',

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
     }
   }
 })