Maximum time to display stale content in a transition?

[devongovett]

I was playing with the demo on https://async-react.dev/, and came across a question that others might have as well. I noticed that if you make the network slow and then click another tab (like "Done"), the tab updates instantly (great), but the content in the list stays stale until the request completes. There's a loading indicator on the optimistically selected tab, but it's not clear that the content in the list below is not actually the content for that tab.

I assume this is to prevent flickering on fast networks where the suspense boundary shows its fallback for a very short amount of time, but on slow networks it's a little strange. Ideally I think the stale content from the previous tab would stay there for a short amount of time, but if the request took a while, it should fall back to a skeleton again. Is there a recommended pattern to implement something like that?

You can set a key={tab} on the Suspense to force the fallback to appear, but then it shows even on fast networks. I couldn't find a clean way to show the suspense fallback only after a minimum amount of time, which I think would be the best UX.