gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-01 20:24:25 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

feat(client/right_pane): use intersection observer for performance

Browse Source
This commit is contained in:
Elian Doran 2025-12-29 22:36:03 +02:00
parent bcf72f4624
commit cb33404122
No known key found for this signature in database
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/client/src/widgets/sidebar/PdfPages.tsx
View File

@ -81,18 +81,43 @@ function PdfPageItem({
pageNumber: number;
isActive: boolean;
thumbnail?: string;
onRequestThumbnail: (pageNumber: number) => void;
onPageClick: () => void;
}) {
const itemRef = useRef<HTMLDivElement>(null);
const hasRequested = useRef(false);
useEffect(() => {
if (!thumbnail && !hasRequested.current) {
hasRequested.current = true;
onRequestThumbnail(pageNumber);
}
const element = itemRef.current;
if (!element) return;
// Create intersection observer to detect when item enters viewport
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !thumbnail && !hasRequested.current) {
hasRequested.current = true;
onRequestThumbnail(pageNumber);
}
});
},
{
root: null, // viewport
rootMargin: '100px', // Load thumbnails slightly before they enter viewport
threshold: 0.01
}
);
observer.observe(element);
return () => {
observer.disconnect();
};
}, [pageNumber, thumbnail, onRequestThumbnail]);
return (
<div
ref={itemRef}
className={`pdf-page-item ${isActive ? 'active' : ''}`}
onClick={onPageClick}
>