startTransition + state in components like Tabs, Menu and similar.

[MrFlashAccount]

Hello,

We utilize react-aria-components in our daily workflow and have found them to be highly effective for our specific requirements.

We are gradually transitioning towards Suspense and transitions, and I have a question regarding the optimal method for integrating components such as <Menu /> and <Tabs /> with the startTransition function. Our objective is to display a loading state within the tab during user navigation. (For reference, please refer to the attached video for an illustration.)

Based on our observations, it appears that there is no alternative solution to this matter except for explicitly unwrapping these components.

CleanShot.2025-01-20.at.18.07.54.mp4

[snowystinger]

Hi, thank you very much for the kind words. Is there any chance you can provide a stackblitz or another isolated testing environment. I don't have enough to go off of here.

There's a chance it's related to #6182

We've not had a chance to dive into this issue yet if you'd be interested in doing some preliminary investigating regardless of if it's the same issue.

[vezaynk]

Hi @snowystinger! I am currently investigating this issue as #6182 is the root cause of some problems in our product.

Do you have any suggestions from where the issue is coming from? My prime suspicion right now is something in the Document class because when Suspense is used, it renders with an increasing count of dirtyNodes.

I'm ready to do my best to investigate this bug, but I would appreciate any guidance you can offer.

[snowystinger]

Thank you! I think you're on the right path, confirming that the built collection matches expectations and that the fake DOM also matches expections. Unfortunately, we haven't had much time to use Suspense yet, so I really don't have many pointers. I'm not sure what kinds of things can go wrong or how Suspense is implemented. At this point, any information will help in this :)

[vezaynk]

@snowystinger Thanks for your reply!

The codebase is quite complex, so I'm still wrapping my head around the data flows. It took me a some time to understand that collections are rendered in two steps (first in a hidden view, which registers all the elements and their children into a Collection; second, from the collection into the visible DOM).

The big things that I'm seeing right now are:

1. The inputs are correct. Each component which is expected to be rendered is executed, and pushes itself to the Collection.
2. The outputs are partially correct. With the <Hidden> part of a collection, the outputs are correct. Within the visible part (generated from the Collection view), they are not.
3. The transaction likely is not being settled correctly (hence the dirtyNodes and transactionCount perpetually going up).

As an outsider, all of this is very difficult to mentally parse and debug. If you're okay with a quicker line of communication to help me unstuck myself, that would help a lot (email? some chat? slack? etc?).

[vezaynk]

The other headline item is that I have no clue why Suspense would break things, but Transitions generally break components that expect the entire tree to be re-rendered every time, synchronously (i.e. the top parent might expect the deepest child to make a callback prior to mounting).

[snowystinger]

tagging @devongovett and @LFDanLu as they have more experience with the collections and may have their own insight to share