#All items are initially rendered until I scroll a bit

1 messages · Page 1 of 1 (latest)

glad mantle
#

Set up looks like this:

    const dataSource = [
        { uuid: "add-button" },
        { uuid: "a75" },
        { uuid: "8a7" },
        ...
    ];

    const itemsPerRow = 3;
    const rows = splitArrayIntoRows(dataSource, itemsPerRow);

    const virtualizer = useVirtualizer({
        count: rows.length,
        getScrollElement: () => parentRef.current,
        estimateSize: () => 5,
        overscan: 5,
    });
    const items = virtualizer.getVirtualItems();
#

JSX looks like this:

            <div
                ref={parentRef}
                className={styles.selectMedia}
                style={{ contain: "strict", overflowY: "auto" }}
            >
                <div
                    style={{
                        height: virtualizer.getTotalSize(),
                        position: "relative",
                        width: "100%",
                    }}
                >
                    <div
                        style={{
                            width: "100%",
                            transform: `translateY(${items[0].start}px)`,
                            position: "absolute",
                            top: 0,
                            left: 0,
                        }}
                    >
                        {items.map((virtualItem) => {
                            const rowIndex = virtualItem.index;
                            const row = rows[rowIndex];

                            return (
                                <div key={rowIndex} className={styles.row}>
                                    {row.map((rowItem) =>
                                        renderRowItem(rowItem)
                                    )}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
#

It seems to be in line with what the examples do so I'm not sure what I'm doing wrong. I'm hoping someone already had a similar problem and is able to tell me where to look 🙂