VirtuosoGrid with useWindowScroll

[Karbust]

Hello,

I'm trying to use virtuoso, since it's enough for my purpose and alternatives are really confusing.

My intent is showing icons in a grid like way and use the window scroll instead the default method, but it only renders up to 256 items and scrolling doesn't change anything, not even when I reach the end I trigger the endReached. The onScroll prop is also not triggered.

The entire page is rendered with the "correct" height, but only renders 256 items and the rest is empty.

This is my code:

<VirtuosoGrid
	useWindowScroll
	overscan={200}
	totalCount={count}
	itemContent={(index) => (<ItemWrapper>{_cellRenderer(index)}</ItemWrapper>)}
	components={{
		Item: ItemContainer,
		List: ListContainer
	}}
	endReached={(index) => {
		if (count < arrayOfficialIconsListFiltered.length) {
			setTimeout(() => {
				console.log(index)
				setCount((old) => old + 20)
			}, 1000)
		}
	}}
/>

The code inside _cellRenderer was already being without virtuoso or any other alternative, but for performance issues i decided to try and wrap it...

Any idea on how I can solve this issue?

[petyosi]

I am not exactly sure what's not working in your case, but you can start from this very simple test setup I used when developing.

[Karbust]

That's the exact example I based myself. Here's a small video: https://testes.karbust.me/AJrE3AK4XH.mp4

The space is allocated (gray area), but no more icons are loaded on scroll... It should have 3730 icons total.

This is the code to load each icon:

    const _cellRenderer = (index: number) => {
        const icon = arrayOfficialIconsListFiltered[index]
        return (
            <Tooltip
                title={(
                    <div>
                        <Typography>
                            {
                                t('iconName', { iconName: getI18n().exists(`${icon}.name`) ? Buffer.from(t(`${icon}.name`), 'base64').toString() : 'NoName' })
                            }
                        </Typography>
                        <Typography>{t('iconId', { iconId: icon })}</Typography>
                    </div>
                )}
                TransitionComponent={Zoom}
                classes={{ tooltip: classes.tooltipLabel }}
                arrow
            >
                <div
                    role='button'
                    tabIndex={0}
                    aria-label={`icon-official-${icon}`}
                    className={`icon-${icon} iconsPosition`}
                    onMouseDown={() => (isBrowser && getI18n().exists(`${icon}.model`) ? handleClickOpen({
                        icon,
                        model: t(`${icon}.model`),
                        type: t(`${icon}.type`),
                        name: getI18n().exists(`${icon}.name`) ? Buffer.from(t(`${icon}.name`), 'base64').toString() : 'NoName'
                    }) : handleClickCopyOfficial(icon))}
                />
            </Tooltip>
        )
    }

[carlreid]

Did you ever find out what caused this for you? I've ran into the same/similar issue

[Karbust]

Did you ever find out what caused this for you? I've ran into the same/similar issue

Unfortunately, I did not, but I managed to improve significantly the performance in other places.

[carlreid]

The only thing that seems to cause a render is if I switch tabs. Though then it only renders that specific area and the items above/below are missing.

I'll see if I can get any further with it.

Edit:
When I scroll, rangeChanged is not being called. If I switch tabs (away then back again) it is called. Guess something is causing a re-render to cause this though.