Delay setting useTransition isPending to true until JND

[subhero24]

Do you want to request a feature or report a bug?
Maybe a feature?

When using Suspense and useTransition, the isPending of useTransition is immediately set to true.
I want to show a spinner when a transition is still pending, but showing it immediately results in a flashing spinner when the underlying promise resolves very fast. This is not a nice experience.

Is there a useTransition suspense option to delay the isPending indicator? I want to prevent the spinner from showing if the transition completes in for example 100ms.

[aweary]

@subhero24 this is addressed in the Concurrent Mode Patterns docs, check out Delaying a Pending Indicator. If you have other questions, check out our community support resources. Hope that helps!

[subhero24]

Ah, forgot it was mentioned in the docs. Thanks!
However, i don't think it solves the problem.

When I set a visibility delay like this with a css animation with for example 500ms, and i want to make sure the spinner does not disappear for 300ms, I have to set the busyMinDurationMs to 800ms. Now all my transitions will take 800ms! If I could have specified the 500ms to useTransition, it could have ignored the busyMinDurationMs if the spinner was not yet shown. And apply a busyMinDurationMs of 300ms if the spinner was already shown. Is there any other solution to this? I think this is something that can not be implemented in "user-land", as useTransition now only allows for a fixed busyMinDurationMs.

[gaearon]

I want to prevent the spinner from showing if the transition completes in for example 100ms.

I think this might have been the intended behavior but we didn't get to implementing it. Or maybe it doesn't always work.

[subhero24]

I thought maybe that was what the busyDelayMs option was for. But it seems to have no effect when used with useTransition.

[gaearon]

Do you have a minimal repro example? A sandbox would be helpful.

[subhero24]

@gaearon You can find a sandbox here

[subhero24]

I think maybe this can be closed, as useTransition in the React 18 alpha does not seem to support things like timeoutMs or minBusyMs.

@gaearon I was wondering what the reasoning is for changing this. Does this mean it is now impossible to do a transition with skeleton states? Can such transitions be done in any other way now? Or did it just not have any use cases to do it like that?

[gaearon]

I think maybe this can be closed, as useTransition in the React 18 alpha does not seem to support things like timeoutMs or minBusyMs.

I'm not sure. Maybe it still makes sense to automatically delay setting isPending to true until some very little time passes (not configurable)? Or maybe this already happens? It would be good to check.

I was wondering what the reasoning is for changing this. Does this mean it is now impossible to do a transition with skeleton states?

Please see the reasoning in #19703.

[gaearon]

Let's track this in #18006 which was filed earlier and is about the same problem.