Don't add aborted segments to the completedSegments list

facebook · Jul 28, 2021 · 143d4e6 · 143d4e6
1 parent cdccdbe
commit 143d4e6
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1447,4 +1447,35 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([theError]);
   });
+
+  // @gate experimental
+  it('should be able to abort the fallback if the main content finishes first', async () => {
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback={<Text text="Loading Outer" />}>
+          <div>
+            <Suspense
+              fallback={
+                <div>
+                  <AsyncText text="Loading" />
+                  Inner
+                </div>
+              }>
+              <AsyncText text="Hello" />
+            </Suspense>
+          </div>
+        </Suspense>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual('Loading Outer');
+    // We should have received a partial segment containing the a partial of the fallback.
+    expect(container.innerHTML).toContain('Inner');
+    await act(async () => {
+      resolveText('Hello');
+    });
+    // We should've been able to display the content without waiting for the rest of the fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
@@ -1408,7 +1408,11 @@ function finishedTask(
       // This must have been the last segment we were waiting on. This boundary is now complete.
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
-        boundary.completedSegments.push(segment);
+        // If it is a segment that was aborted, we'll write other content instead so we don't need
+        // to emit it.
+        if (segment.status === COMPLETED) {
+          boundary.completedSegments.push(segment);
+        }
       }
       if (boundary.parentFlushed) {
         // The segment might be part of a segment that didn't flush yet, but if the boundary's
@@ -1423,14 +1427,18 @@ function finishedTask(
     } else {
       if (segment.parentFlushed) {
         // Our parent already flushed, so we need to schedule this segment to be emitted.
-        const completedSegments = boundary.completedSegments;
-        completedSegments.push(segment);
-        if (completedSegments.length === 1) {
-          // This is the first time since we last flushed that we completed anything.
-          // We can schedule this boundary to emit its partially completed segments early
-          // in case the parent has already been flushed.
-          if (boundary.parentFlushed) {
-            request.partialBoundaries.push(boundary);
+        // If it is a segment that was aborted, we'll write other content instead so we don't need
+        // to emit it.
+        if (segment.status === COMPLETED) {
+          const completedSegments = boundary.completedSegments;
+          completedSegments.push(segment);
+          if (completedSegments.length === 1) {
+            // This is the first time since we last flushed that we completed anything.
+            // We can schedule this boundary to emit its partially completed segments early
+            // in case the parent has already been flushed.
+            if (boundary.parentFlushed) {
+              request.partialBoundaries.push(boundary);
+            }
           }
         }
       }