Googled it because I haven't heard of that before, landed on https://www.amitmerchant.com/the-new-starttransition-api-react-18/. Is it just me or do lots of react people have colourful websites?

Does useTransition play with suspense? The isPending seems like a separate api for is "is loading?"

I don't think it's directly related to suspense

the best resource i've found for these new APIs is the React 18 working group

https://github.com/reactwg/react-18/discussions/41

based on my experience with it so far, isPending gets set immediately on a render wrapped with startTransition , even if it's not being blocked in any way

which is different from suspense, which will pause rendering the tree that suspended and notify the nearest suspense boundary, but only if it encounters a suspending component

they have a real world demo here: https://github.com/reactwg/react-18/discussions/65

in it, they use a CSS transition to only show the pending state if it takes >200ms

after using it, it makes sense and is very clever

• startTransition signals to React that we are about to do a render that is possibly expensive and we want to opt in to time slicing to keep the app responsive • isPending is set immediately so that we don't have to halt the expensive rendering to render the loading state • then we use CSS transitions or some other way of hiding the loading state until we know the render is taking awhile

I think the context to a lot of the new APIs in React 18 is that they've decided, rather than have a "Concurrent Mode" that your app either enables or disables, to have the ability to opt in to concurrent rendering for each update. startTransition is one of the ways of doing that

Oh, and the loading spinner is actually an opacity: 0 float over the content?

Oh, no. No overlay. They're just switching from pending->done, and not showing a loading spinner.

they use opacity of the component to show it's in a pending state

so opacity is normally 100%, they switch to like 30% when isPending with 200ms transition

for my current side project I switched it to like you're saying. I have a loading indicator always rendered on the page at opacity: 0 and then change it to 100% on isPending with a 200ms transition