Strange delay when using suspense

[mcjazzyfunky]

Please have a look at the following demo:
https://codesandbox.io/s/boring-shadow-2kw63?file=/src/index.js

When you click on one of the buttons you will notice some kind of delay of maybe 400 ms or something. Wouldn't it be better if there would not be such a delay by default but instead could be configurable by using <Suspense delay={400} fallback={...}> ... </Suspense>?

[thysultan]

Isn't that from getRandomNumberDelayed that returns a promise with a 3s delay(3000ms)?

[thysultan]

NVM, i see what you mean(the showing of the loading state).

[thysultan]

Yes, there's a delay, maybe we can make it 100ms(as a default) and allow the delay prop that you suggest. Right now i think the default is 600ms.

[Zolmeister]

Indeed, it's 600ms

dyo/src/Suspense.js

Line 122 in 72ec270

Utility.timeout(callback, Enum.network)

dyo/src/Enum.js

Line 9 in 72ec270

export var network = timeout * 6

I'm not sure it should have a default timeout. I set one for server-side rendering at the top of the render loop, but otherwise timeout should be handled by the suspense promise itself.

[thysultan]

The 'default timeout' does not affect server-side rendering as you cannot interact with the ui in server-side rendering. the default timeout only takes effect for subsequent events after the initial rendering(i.e in this case the click event) — in this example the "Loading..." timeout doesn't happen for the initial load.

The idea behind the timeout was to avoid a loading state if the network response time is fast enough as to not be perceptible, but 600ms seemed to be too much thus my suggestion for 100ms.

We should probably call it timeout instead of delay to more closely map with it's intended meaning.

[Zolmeister]

Looks like React does timeout configuration through useTransition (though not sure of default).

[thysultan]

Per facebook/react#19703 it looks like they removed that config opt.