TanStack / TanStack/virtual

Dynamic sizes lit demo crashes/ loads very slowly

Open
#1,188 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
7.1k
Forks
466
Avg merge
2d 31m
Merged PRs (30d)
13

Description

Describe the bug

Your demo with the latest versions of lit-virtual (3.13.29) and virtual-core (3.17.0) either loads very slowly (> 1 minute) or just crashes the browser.

I was really happy a new version was available, because 3.16 (and some versions before) broke the scrollToIndex functionality in Lit, but this release might unfortunately be worse.
Once the page actually loads the scrollToIndex does seem to work 😁

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-wvfdjawc?file=package.json,index.html,tsconfig.json,src%2Fmain.ts&terminal=dev

Steps to reproduce

I isolated the RowVirtualizerDynamic scenario and removed the other 2 that were on the page.
There is no real reproduction path, just try to load the page.

It can take over a minute for the page to load sometimes. And sometimes the browser just crashes.

Expected behavior

The page loads fast and the scrolling to halfway works.

How often does this bug happen?

Often

Screenshots or Videos

No response

Platform

MacOS 26.5
Chrome 148.0.7778.215
Firefox 148.0.7778.215

tanstack-virtual version

3.17.0

TypeScript version

5.6.3

Additional context

@tanstack/lit-virtual": "3.13.29"

I removed the generation of random paragraphs with faker and just have every item be the same string, that didn't solve anything.

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproduction, especially package.json and src/main.ts, and run the isolated RowVirtualizerDynamic scenario in the listed browser versions. Compare loading and scrollToIndex behavior with the reported lit-virtual 3.13.29 and virtual-core 3.17.0 versions. Done means the page loads promptly, does not crash the browser, and scrolling halfway works.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.