Skip to content

Virtualizer renders nothing if collection items suspend #8214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
alirezamirian opened this issue May 10, 2025 · 0 comments · May be fixed by #8215
Open

Virtualizer renders nothing if collection items suspend #8214

alirezamirian opened this issue May 10, 2025 · 0 comments · May be fixed by #8215

Comments

@alirezamirian
Copy link
Contributor

Provide a general summary of the issue here

In components that use Virtualizer, such as React Spectrum's ListView, nothing is rendered initially if the item's rendered content suspends rendering. Any interaction that resizes the collection container makes the items appear.

Root cause

ScrollView flushes react updates using flushSync:

react-spectrum/packages/@react-aria/virtualizer/src/ScrollView.tsx

Lines 182 to 192 in e9bd3a3

// If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
// a result of the layout update. In this case, re-layout again to account for the
// adjusted space. In very specific cases this might result in the scrollbars disappearing
// again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
// an infinite loop. This matches how browsers behavior with native CSS grid layout.
if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
state.width = dom.clientWidth;
state.height = dom.clientHeight;
flush(() => {
onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
});

That can synchronously render Suspense boundary fallback if the update suspends, which hides the collection element, resulting in width and height being measured as 0.

🤔 Expected Behavior?

It should be possible for the item content to suspend without breaking the UI.

😯 Current Behavior

If the items suspend, nothing will be rendered.

💁 Possible Solution

The if condition mentioned above can have an extra check on the visibility of the dom element, to guard against the element being hidden due to suspense fallback being rendered by flushSync.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/nifty-carlos-ccnxhs?file=%2Fsrc%2FApp.js%3A20%2C70

Version

3.41.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
alirezamirian added a commit to alirezamirian/react-spectrum that referenced this issue May 10, 2025
@alirezamirian
fix(ScrollView): don't report empty visible rect when the content sus…
3880bde 
…pends

closes adobe#8214
@alirezamirian alirezamirian linked a pull request May 10, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@alirezamirian