Description
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
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