adobe / adobe/react-spectrum

Brief flash when navigating to a React Aria collection (in a React Router app)

Open
#9,063 3 comments 0 reactions 0 assignees View on GitHub
needs investigation
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.