Brief flash when navigating to a React Aria collection (in a React Router app)
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When navigating to a page that has a React Aria collection (``, ``, ...), the list will first be empty, then filled with its items, causing a flash. It's less obvious on more performant devices but very visible on low-end mobiles.
Even when not visible, the flash causes the React Router's `` (https://reactrouter.com/api/components/ScrollRestoration) component to break, because the page height changes between the two renders.
### 🤔 Expected Behavior?
There's no flash when the list renders and the scroll restoration of React Router works as expected.
### 🖥️ Steps to Reproduce
1. Navigate to this sandbox : https://codesandbox.io/p/devbox/loving-leavitt-dyvqtf.
2. Start the server and navigate to the home page, there is a `` with 500 ``.
3. Scroll a bit the page, and click on one of the ``.
4. Press the back button of your browser.
5. Observe the flash, and the scroll being reset to the top.
### Version
`react-router` : 7.9.4 / 8.3.1
`react-aria-components` : 1.13.0 / 1.20.0
### What browsers are you seeing the problem on?
Chrome, Firefox, Chromium.
Contributor guide
Assessment
This issue has not been assessed yet.