From d5a0d493dc98056e3856bea5125dcd3a97485e39 Mon Sep 17 00:00:00 2001
From: d0kur0 <dev.dokuro@gmail.com>
Date: Mon, 30 Oct 2023 04:07:21 +0300
Subject: [PATCH] perf: add batch rendering for threads on scroll

---
 src/pages/PageThreads.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/pages/PageThreads.tsx b/src/pages/PageThreads.tsx
index 1e2017d..f922297 100644
--- a/src/pages/PageThreads.tsx
+++ b/src/pages/PageThreads.tsx
@@ -9,7 +9,7 @@ import {
 	Tooltip,
 	notificationService,
 } from "@hope-ui/solid";
-import { createMemo, createSignal, For } from "solid-js";
+import { createEffect, createMemo, createSignal, For } from "solid-js";
 import { useStore } from "@nanostores/solid";
 import { $threads } from "../stores/media";
 import { Empty } from "../components/Empty";
@@ -18,6 +18,7 @@ import { useNavigate } from "@solidjs/router";
 import { ImEyeBlocked } from "solid-icons/im";
 import { ImBlocked } from "solid-icons/im";
 import { $excludeRulesMutations } from "../stores/excludeRules";
+import { createVisibilityObserver } from "@solid-primitives/intersection-observer";
 
 type ThreadCard = {
 	thread: ExtendedThread;
@@ -103,15 +104,28 @@ function ThreadCard(props: ThreadCard) {
 	);
 }
 
+const LIMIT = 20;
+
 export function PageThreads() {
 	const [searchQuery, setSearchQuery] = createSignal("");
+	const [getPage, setPage] = createSignal(1);
 
 	const threads = useStore($threads);
 
 	const threadsForRender = createMemo(() =>
-		threads().filter(thread => thread.subject?.toLowerCase().includes(searchQuery().toLowerCase())),
+		threads()
+			.filter((thread) => thread.subject?.toLowerCase().includes(searchQuery().toLowerCase()))
+			.slice(0, getPage() * LIMIT),
 	);
 
+	let loadMoreRef: HTMLDivElement;
+
+	const visible = createVisibilityObserver({ threshold: 0.8 })(() => loadMoreRef);
+
+	createEffect(() => {
+		visible() && setPage((v) => v + 1);
+	});
+
 	return (
 		<Box p={16}>
 			<Heading mb={24}>Список тредов</Heading>
@@ -138,8 +152,10 @@ export function PageThreads() {
 
 				<Box css={{ display: "flex", flexDirection: "column", gap: 12 }}>
 					<For each={threadsForRender()} fallback={<Empty>Список тредов пуст</Empty>}>
-						{thread => <ThreadCard thread={thread} />}
+						{(thread) => <ThreadCard thread={thread} />}
 					</For>
+
+					<div ref={loadMoreRef!} />
 				</Box>
 			</Box>
 		</Box>