Delay setting useTransition isPending to true until JND #18595
Description
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.
Activity
aweary commentedon Apr 14, 2020
@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 commentedon Apr 14, 2020
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 commentedon Apr 14, 2020
I think this might have been the intended behavior but we didn't get to implementing it. Or maybe it doesn't always work.
[-]Suspense delay isPending with useTransition[/-][+]Delay setting useTransition isPending to true until JND[/+]subhero24 commentedon Apr 14, 2020
I thought maybe that was what the busyDelayMs option was for. But it seems to have no effect when used with useTransition.
gaearon commentedon Jun 29, 2020
Do you have a minimal repro example? A sandbox would be helpful.
subhero24 commentedon Jul 9, 2020
@gaearon You can find a sandbox here
subhero24 commentedon Jun 9, 2021
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 commentedon Jun 9, 2021
I'm not sure. Maybe it still makes sense to automatically delay setting
isPendingtotrueuntil some very little time passes (not configurable)? Or maybe this already happens? It would be good to check.Please see the reasoning in #19703.
gaearon commentedon Jun 22, 2021
Let's track this in #18006 which was filed earlier and is about the same problem.