Add tail="collapsed" option to SuspenseList (facebook#16007)

* Add tail="collapsed" option

* Fix issue with tail exceeding the CPU time limit

We used to assume that this didn't suspend but this branch happens in
both cases. This fixes it so that we first check if we suspended.

Now we can fix the tail so that it always render an additional fallback
in this scenario.

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -14,6 +14,7 @@ import type {ExpirationTime} from './ReactFiberExpirationTime';
 import type {
   SuspenseState,
   SuspenseListRenderState,
+  SuspenseListTailMode,
 } from './ReactFiberSuspenseComponent';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
@@ -188,6 +189,7 @@ let didWarnAboutFunctionRefs;
 export let didWarnAboutReassigningProps;
 let didWarnAboutMaxDuration;
 let didWarnAboutRevealOrder;
+let didWarnAboutTailOptions;
 
 if (__DEV__) {
   didWarnAboutBadClass = {};
@@ -198,6 +200,7 @@ if (__DEV__) {
   didWarnAboutReassigningProps = false;
   didWarnAboutMaxDuration = false;
   didWarnAboutRevealOrder = {};
+  didWarnAboutTailOptions = {};
 }
 
 export function reconcileChildren(
@@ -2063,11 +2066,40 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
   }
 }
 
+function validateTailOptions(
+  tailMode: SuspenseListTailMode,
+  revealOrder: SuspenseListRevealOrder,
+) {
+  if (__DEV__) {
+    if (tailMode !== undefined && !didWarnAboutTailOptions[tailMode]) {
+      if (tailMode !== 'collapsed') {
+        didWarnAboutTailOptions[tailMode] = true;
+        warning(
+          false,
+          '"%s" is not a supported value for tail on <SuspenseList />. ' +
+            'Did you mean "collapsed"?',
+          tailMode,
+        );
+      } else if (revealOrder !== 'forwards' && revealOrder !== 'backwards') {
+        didWarnAboutTailOptions[tailMode] = true;
+        warning(
+          false,
+          '<SuspenseList tail="%s" /> is only valid if revealOrder is ' +
+            '"forwards" or "backwards". ' +
+            'Did you mean to specify revealOrder="forwards"?',
+          tailMode,
+        );
+      }
+    }
+  }
+}
+
 function initSuspenseListRenderState(
   workInProgress: Fiber,
   isBackwards: boolean,
   tail: null | Fiber,
   lastContentRow: null | Fiber,
+  tailMode: SuspenseListTailMode,
 ): void {
   let renderState: null | SuspenseListRenderState =
     workInProgress.memoizedState;
@@ -2078,6 +2110,7 @@ function initSuspenseListRenderState(
       last: lastContentRow,
       tail: tail,
       tailExpiration: 0,
+      tailMode: tailMode,
     };
   } else {
     // We can reuse the existing object from previous renders.
@@ -2086,6 +2119,7 @@ function initSuspenseListRenderState(
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailExpiration = 0;
+    renderState.tailMode = tailMode;
   }
 }
 
@@ -2103,9 +2137,11 @@ function updateSuspenseListComponent(
 ) {
   const nextProps = workInProgress.pendingProps;
   const revealOrder: SuspenseListRevealOrder = nextProps.revealOrder;
+  const tailMode: SuspenseListTailMode = nextProps.tail;
   const newChildren = nextProps.children;
 
   validateRevealOrder(revealOrder);
+  validateTailOptions(tailMode, revealOrder);
 
   reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
 
@@ -2163,6 +2199,7 @@ function updateSuspenseListComponent(
           false, // isBackwards
           tail,
           lastContentRow,
+          tailMode,
         );
         break;
       }
@@ -2193,6 +2230,7 @@ function updateSuspenseListComponent(
           true, // isBackwards
           tail,
           null, // last
+          tailMode,
         );
         break;
       }
@@ -2202,6 +2240,7 @@ function updateSuspenseListComponent(
           false, // isBackwards
           null, // tail
           null, // last
+          undefined,
         );
         break;
       }

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -537,6 +537,46 @@ if (supportsMutation) {
   };
 }
 
+function cutOffTailIfNeeded(
+  renderState: SuspenseListRenderState,
+  hasRenderedATailFallback: boolean,
+) {
+  switch (renderState.tailMode) {
+    case 'collapsed': {
+      // Any insertions at the end of the tail list after this point
+      // should be invisible. If there are already mounted boundaries
+      // anything before them are not considered for collapsing.
+      // Therefore we need to go through the whole tail to find if
+      // there are any.
+      let tailNode = renderState.tail;
+      let lastTailNode = null;
+      while (tailNode !== null) {
+        if (tailNode.alternate !== null) {
+          lastTailNode = tailNode;
+        }
+        tailNode = tailNode.sibling;
+      }
+      // Next we're simply going to delete all insertions after the
+      // last rendered item.
+      if (lastTailNode === null) {
+        // All remaining items in the tail are insertions.
+        if (!hasRenderedATailFallback && renderState.tail !== null) {
+          // We suspended during the head. We want to show at least one
+          // row at the tail. So we'll keep on and cut off the rest.
+          renderState.tail.sibling = null;
+        } else {
+          renderState.tail = null;
+        }
+      } else {
+        // Detach the insertion after the last node that was already
+        // inserted.
+        lastTailNode.sibling = null;
+      }
+      break;
+    }
+  }
+}
+
 // Note this, might mutate the workInProgress passed in.
 function hasSuspendedChildrenAndNewContent(
   workInProgress: Fiber,
@@ -991,11 +1031,18 @@ function completeWork(
           didSuspendAlready =
             (workInProgress.effectTag & DidCapture) !== NoEffect;
         }
+        if (didSuspendAlready) {
+          cutOffTailIfNeeded(renderState, false);
+        }
         // Next we're going to render the tail.
       } else {
         // Append the rendered row to the child list.
         if (!didSuspendAlready) {
-          if (
+          if (isShowingAnyFallbacks(renderedTail)) {
+            workInProgress.effectTag |= DidCapture;
+            didSuspendAlready = true;
+            cutOffTailIfNeeded(renderState, true);
+          } else if (
             now() > renderState.tailExpiration &&
             renderExpirationTime > Never
           ) {
@@ -1004,6 +1051,9 @@ function completeWork(
             // The assumption is that this is usually faster.
             workInProgress.effectTag |= DidCapture;
             didSuspendAlready = true;
+
+            cutOffTailIfNeeded(renderState, false);
+
             // Since nothing actually suspended, there will nothing to ping this
             // to get it started back up to attempt the next item. If we can show
             // them, then they really have the same priority as this render.
@@ -1015,9 +1065,6 @@ function completeWork(
             if (enableSchedulerTracing) {
               markSpawnedWork(nextPriority);
             }
-          } else if (isShowingAnyFallbacks(renderedTail)) {
-            workInProgress.effectTag |= DidCapture;
-            didSuspendAlready = true;
           }
         }
         if (renderState.isBackwards) {

packages/react-reconciler/src/ReactFiberSuspenseComponent.js

@@ -14,6 +14,8 @@ import {SuspenseComponent} from 'shared/ReactWorkTags';
 // Alternatively we can make this use an effect tag similar to SuspenseList.
 export type SuspenseState = {||};
 
+export type SuspenseListTailMode = 'collapsed' | void;
+
 export type SuspenseListRenderState = {|
   isBackwards: boolean,
   // The currently rendering tail row.
@@ -24,6 +26,8 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // The absolute time in ms that we'll expire the tail rendering.
   tailExpiration: number,
+  // Tail insertions setting.
+  tailMode: SuspenseListTailMode,
 |};
 
 export function shouldCaptureSuspense(