Add tail="hidden" option to SuspenseList

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -125,7 +125,7 @@ import {
   addSubtreeSuspenseContext,
   setShallowSuspenseContext,
 } from './ReactFiberSuspenseContext';
-import {isShowingAnyFallbacks} from './ReactFiberSuspenseComponent';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
 import {
   pushProvider,
   propagateContextChange,
@@ -2000,7 +2000,7 @@ function findLastContentRow(firstChild: null | Fiber): null | Fiber {
   while (row !== null) {
     let currentRow = row.alternate;
     // New rows can't be content rows.
-    if (currentRow !== null && !isShowingAnyFallbacks(currentRow)) {
+    if (currentRow !== null && findFirstSuspended(currentRow) === null) {
       lastContentRow = row;
     }
     row = row.sibling;
@@ -2072,12 +2072,12 @@ function validateTailOptions(
 ) {
   if (__DEV__) {
     if (tailMode !== undefined && !didWarnAboutTailOptions[tailMode]) {
-      if (tailMode !== 'collapsed') {
+      if (tailMode !== 'collapsed' && tailMode !== 'hidden') {
         didWarnAboutTailOptions[tailMode] = true;
         warning(
           false,
           '"%s" is not a supported value for tail on <SuspenseList />. ' +
-            'Did you mean "collapsed"?',
+            'Did you mean "collapsed" or "hidden"?',
           tailMode,
         );
       } else if (revealOrder !== 'forwards' && revealOrder !== 'backwards') {
@@ -2242,10 +2242,10 @@ function updateSuspenseListComponent(
   pushSuspenseContext(workInProgress, suspenseContext);
 
   if ((workInProgress.mode & BatchedMode) === NoMode) {
-    workInProgress.memoizedState = null;
-  } else {
     // Outside of batched mode, SuspenseList doesn't work so we just
     // use make it a noop by treating it as the default revealOrder.
+    workInProgress.memoizedState = null;
+  } else {
     switch (revealOrder) {
       case 'forwards': {
         let lastContentRow = findLastContentRow(workInProgress.child);
@@ -2281,7 +2281,7 @@ function updateSuspenseListComponent(
         while (row !== null) {
           let currentRow = row.alternate;
           // New rows can't be content rows.
-          if (currentRow !== null && !isShowingAnyFallbacks(currentRow)) {
+          if (currentRow !== null && findFirstSuspended(currentRow) === null) {
             // This is the beginning of the main content.
             workInProgress.child = row;
             break;

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -92,7 +92,7 @@ import {
   ForceSuspenseFallback,
   setDefaultShallowSuspenseContext,
 } from './ReactFiberSuspenseContext';
-import {isShowingAnyFallbacks} from './ReactFiberSuspenseComponent';
+import {findFirstSuspended} from './ReactFiberSuspenseComponent';
 import {
   isContextProvider as isLegacyContextProvider,
   popContext as popLegacyContext,
@@ -537,6 +537,32 @@ function cutOffTailIfNeeded(
   hasRenderedATailFallback: boolean,
 ) {
   switch (renderState.tailMode) {
+    case 'hidden': {
+      // 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.
+        renderState.tail = null;
+      } else {
+        // Detach the insertion after the last node that was already
+        // inserted.
+        lastTailNode.sibling = null;
+      }
+      break;
+    }
     case 'collapsed': {
       // Any insertions at the end of the tail list after this point
       // should be invisible. If there are already mounted boundaries
@@ -1033,10 +1059,34 @@ function completeWork(
       } else {
         // Append the rendered row to the child list.
         if (!didSuspendAlready) {
-          if (isShowingAnyFallbacks(renderedTail)) {
+          let suspended = findFirstSuspended(renderedTail);
+          if (suspended !== null) {
             workInProgress.effectTag |= DidCapture;
             didSuspendAlready = true;
             cutOffTailIfNeeded(renderState, true);
+            // This might have been modified.
+            if (
+              renderState.tail === null &&
+              renderState.tailMode === 'hidden'
+            ) {
+              // We need to delete the row we just rendered.
+              // Ensure we transfer the update queue to the parent.
+              let newThennables = suspended.updateQueue;
+              if (newThennables !== null) {
+                workInProgress.updateQueue = newThennables;
+                workInProgress.effectTag |= Update;
+              }
+              // Reset the effect list to what it w as before we rendered this
+              // child. The nested children have already appended themselves.
+              let lastEffect = (workInProgress.lastEffect =
+                renderState.lastEffect);
+              // Remove any effects that were appended after this point.
+              if (lastEffect !== null) {
+                lastEffect.nextEffect = null;
+              }
+              // We're done.
+              return null;
+            }
           } else if (
             now() > renderState.tailExpiration &&
             renderExpirationTime > Never
@@ -1093,6 +1143,7 @@ function completeWork(
         let next = renderState.tail;
         renderState.rendering = next;
         renderState.tail = next.sibling;
+        renderState.lastEffect = workInProgress.lastEffect;
         next.sibling = null;
 
         // Restore the context.

packages/react-reconciler/src/ReactFiberSuspenseComponent.js

@@ -8,13 +8,14 @@
  */
 
 import type {Fiber} from './ReactFiber';
-import {SuspenseComponent} from 'shared/ReactWorkTags';
+import {SuspenseComponent, SuspenseListComponent} from 'shared/ReactWorkTags';
+import {NoEffect, DidCapture} from 'shared/ReactSideEffectTags';
 
 // TODO: This is now an empty object. Should we switch this to a boolean?
 // Alternatively we can make this use an effect tag similar to SuspenseList.
 export type SuspenseState = {||};
 
-export type SuspenseListTailMode = 'collapsed' | void;
+export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
 
 export type SuspenseListRenderState = {|
   isBackwards: boolean,
@@ -28,6 +29,9 @@ export type SuspenseListRenderState = {|
   tailExpiration: number,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
+  // Last Effect before we rendered the "rendering" item.
+  // Used to remove new effects added by the rendered item.
+  lastEffect: null | Fiber,
 |};
 
 export function shouldCaptureSuspense(
@@ -58,30 +62,35 @@ export function shouldCaptureSuspense(
   return true;
 }
 
-export function isShowingAnyFallbacks(row: Fiber): boolean {
+export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
   while (node !== null) {
     if (node.tag === SuspenseComponent) {
       const state: SuspenseState | null = node.memoizedState;
       if (state !== null) {
-        return true;
+        return node;
+      }
+    } else if (node.tag === SuspenseListComponent) {
+      let didSuspend = (node.effectTag & DidCapture) !== NoEffect;
+      if (didSuspend) {
+        return node;
       }
     } else if (node.child !== null) {
       node.child.return = node;
       node = node.child;
       continue;
     }
     if (node === row) {
-      return false;
+      return null;
     }
     while (node.sibling === null) {
       if (node.return === null || node.return === row) {
-        return false;
+        return null;
       }
       node = node.return;
     }
     node.sibling.return = node.return;
     node = node.sibling;
   }
-  return false;
+  return null;
 }

packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js

@@ -1251,7 +1251,7 @@ describe('ReactSuspenseList', () => {
 
     expect(() => Scheduler.unstable_flushAll()).toWarnDev([
       'Warning: "collapse" is not a supported value for tail on ' +
-        '<SuspenseList />. Did you mean "collapsed"?' +
+        '<SuspenseList />. Did you mean "collapsed" or "hidden"?' +
         '\n    in SuspenseList (at **)' +
         '\n    in Foo (at **)',
     ]);
@@ -1733,4 +1733,67 @@ describe('ReactSuspenseList', () => {
       </Fragment>,
     );
   });
+
+  it('only shows no initial loading state "hidden" tail insertions', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+    let C = createAsyncText('C');
+
+    function Foo() {
+      return (
+        <SuspenseList revealOrder="forwards" tail="hidden">
+          <Suspense fallback={<Text text="Loading A" />}>
+            <A />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading B" />}>
+            <B />
+          </Suspense>
+          <Suspense fallback={<Text text="Loading C" />}>
+            <C />
+          </Suspense>
+        </SuspenseList>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'Loading B']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]', 'Loading C']);
+
+    // Incremental loading is suspended.
+    jest.advanceTimersByTime(500);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <Fragment>
+        <span>A</span>
+        <span>B</span>
+      </Fragment>,
+    );
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <Fragment>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </Fragment>,
+    );
+  });
 });