dillon1000/react

Expire rendering the tail of SuspenseList after a timeout (#15946)

* Expire rendering the tail of SuspenseList after a timeout

This is the first Suspense feature that isn't actually dependent on IO.

The thinking here is that it's normal for a SuspenseList to show loading
states, and it'll be designed to handle it one at a time.

However, sometimes there are lists with really big items that take a long
time to CPU render. Since data can become available as we do that, it is
likely that we have all the data and become CPU bound.

In that case, the list would naively just render until the end and then
display all items at once. I think that's actually what you want for fast
lists. However, for slow ones (like News Feed), you're better off showing
a few rows at a time.

It's not necessarily one at a time because if you can do many in a short
period of time and fit them all on the screen, then it's better to do them
all at once than pop them in one at a time very quickly.

Therefore, I use a heuristic of trying to render as many rows as I can in
500ms before giving up.

This timer starts before the first row of the tail and we only check it
after. This ensures that we always make a little progress each attempt.
An alternative approach could be to start the time before doing the head
of the list but we don't want that being slow prevent us from making
further progress.

Currently, I disable this optimization at Never priority because there's
nothing intermediate that becomes visible anyway.

* Fix tracing through a SuspenseList

This ensures that we can spawn new work during render through arbitrary
priorities.

We'll need this for other features too.

Since each priority can commit separately we need to use an array to
include the current interactions on each priority.