import {observeElementOffset, useVirtualizer} from '@tanstack/react-virtual'; import React, {Fragment, useContext, useEffect, useRef} from 'react'; import {TableRow} from '@common/ui/tables/table-row'; import {TableBodyProps} from '@common/ui/tables/table'; import {getScrollParent} from '@react-aria/utils'; import {TableContext} from '@common/ui/tables/table-context'; import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel'; import {UseInfiniteQueryResult} from '@tanstack/react-query/src/types'; interface VirtualTableBodyProps extends TableBodyProps { totalItems?: number; query: UseInfiniteQueryResult; } export function VirtualTableBody({ renderRowAs, totalItems = 0, query, }: VirtualTableBodyProps) { const {data} = useContext(TableContext); // make sure we are not rendering more placeholder rows than // there are items left to lazy load and at most 10 placeholders. // If total items is unknown, we will render 10 placeholders. const placeholderRowCount = totalItems <= 0 ? 10 : Math.min(totalItems - data.length, 10); // only use virtualizer if playlist has more than 3 pages return totalItems < 91 ? ( ) : ( ); } interface BodyProps extends TableBodyProps { placeholderRowCount: number; query: UseInfiniteQueryResult; } function Body({renderRowAs, placeholderRowCount, query}: BodyProps) { const {data} = useContext(TableContext); return ( {data.map((track, index) => ( ))} ); } function VirtualizedBody({renderRowAs, placeholderRowCount, query}: BodyProps) { const {data} = useContext(TableContext); const bodyRef = useRef(null); const scrollableRef = useRef(null!); const scrollOffset = useRef(0); // virtualizer will not work with "getScrollElement: () => scrollableRef.current" // if scrollableRef.current is set in useEffect and is null on first render const getScrollElement = () => { if (scrollableRef.current) { return scrollableRef.current; } if (bodyRef.current) { scrollableRef.current = getScrollParent(bodyRef.current); } return scrollableRef.current; }; useEffect(() => { if (bodyRef.current) { scrollOffset.current = bodyRef.current.getBoundingClientRect().top + getScrollElement().scrollTop; } }, [bodyRef]); const virtualizer = useVirtualizer({ overscan: 10, count: data.length, getScrollElement, estimateSize: () => 48, // getScrollElement: () => scrollableRef.current, observeElementOffset: (instance, cb) => { return observeElementOffset(instance, offset => { cb(offset - scrollOffset.current); }); }, }); const virtualRows = virtualizer.getVirtualItems(); const virtualHeight = `${ virtualizer.getTotalSize() + // if showing placeholder rows, extended height of virtual list to show them (query.isFetchingNextPage ? placeholderRowCount * 48 : 0) }px`; return (

{virtualRows.map(virtualItem => { const item = data[virtualItem.index]; return ( ); })}

); } interface SentinelProps extends BodyProps { dataCount: number; query: UseInfiniteQueryResult; style?: React.CSSProperties; } function Sentinel({ dataCount, placeholderRowCount, renderRowAs, query, style, }: SentinelProps) { // show at least one placeholder row always return ( {[...new Array(Math.max(placeholderRowCount, 1)).keys()].map( (key, index) => { const id = `placeholder-${key}`; return ( ); }, )} ); }