bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Another attempt at improving virtual scrolling

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-04 01:11:41 +02:00
parent 7685a1e087
commit 2f60773b86
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/pl-fe/src/components/scrollable-list.tsx
View file

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