From 2f60773b86868aecbc62f7d0e41c165ba144bac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 4 Oct 2024 01:11:41 +0200
Subject: [PATCH] pl-fe: Another attempt at improving virtual scrolling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/scrollable-list.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/pl-fe/src/components/scrollable-list.tsx b/packages/pl-fe/src/components/scrollable-list.tsx
index b019f1ecb0..5026f0cca4 100644
--- a/packages/pl-fe/src/components/scrollable-list.tsx
+++ b/packages/pl-fe/src/components/scrollable-list.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useVirtualizer, useWindowVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import { useSettings } from 'pl-fe/hooks';
 
@@ -62,7 +62,8 @@ interface IScrollableListWithoutContainer extends IScrollableListBase {
 
 type IScrollableList = IScrollableListWithContainer | IScrollableListWithoutContainer;
 
-const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(({  prepend = null,
+const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(({
+  prepend = null,
   alwaysPrepend,
   children,
   isLoading,
@@ -83,6 +84,8 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
   alignToBottom,
   ...props
 }, ref) => {
+  const listRef = useRef<HTMLDivElement>(null);
+
   const { autoloadMore } = useSettings();
 
   /** Normalized children. */
@@ -101,6 +104,7 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
     count: data.length + (hasMore ? 1 : 0),
     overscan: 3,
     estimateSize: () => estimatedSize,
+    scrollMargin: listRef.current ? listRef.current.getBoundingClientRect().top + window.scrollY : 0,
   });
 
   useEffect(() => {
@@ -167,6 +171,7 @@ const ScrollableList = React.forwardRef<Virtualizer<any, any>, IScrollableList>(
 
   const body = (
     <div
+      ref={listRef}
       id={'parentRef' in props ? id : undefined}
       className={listClassName}
       style={{