[Fizz] Delay detachment of completed boundaries until reveal

fixtures/view-transition/src/components/App.js

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useState,
   unstable_addTransitionType as addTransitionType,
+  use,
 } from 'react';
 
 import Chrome from './Chrome';

fixtures/view-transition/src/components/NestedReveal.js

@@ -0,0 +1,36 @@
+import React, {Suspense, use} from 'react';
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function Use({useable}) {
+  use(useable);
+  return null;
+}
+
+let delay1;
+let delay2;
+
+export default function NestedReveal({}) {
+  if (!delay1) {
+    delay1 = sleep(100);
+    // Needs to happen before the throttled reveal of delay 1
+    delay2 = sleep(200);
+  }
+
+  return (
+    <div className="swipe-recognizer">
+      Shell
+      <Suspense fallback="Loading level 1">
+        <div>Level 1</div>
+        <Use useable={delay1} />
+
+        <Suspense fallback="Loading level 2">
+          <div>Level 2</div>
+          <Use useable={delay2} />
+        </Suspense>
+      </Suspense>
+    </div>
+  );
+}

fixtures/view-transition/src/components/Page.js

@@ -18,6 +18,7 @@ import SwipeRecognizer from './SwipeRecognizer';
 import './Page.css';
 
 import transitions from './Transitions.module.css';
+import NestedReveal from './NestedReveal';
 
 async function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
@@ -241,6 +242,7 @@ export default function Page({url, navigate}) {
           </div>
         </ViewTransition>
       </SwipeRecognizer>
+      <NestedReveal />
     </div>
   );
 }

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -34,6 +34,10 @@ export function revealCompletedBoundaries(batch) {
   for (let i = 0; i < batch.length; i += 2) {
     const suspenseIdNode = batch[i];
     const contentNode = batch[i + 1];
+    // We can detach the content now.
+    // Completions of boundaries within this contentNode will now find the boundary
+    // in its designated place.
+    contentNode.parentNode.removeChild(contentNode);
 
     // Clear all the existing children. This is complicated because
     // there can be embedded Suspense boundaries in the fallback.
@@ -385,13 +389,16 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
     // the segment. Regardless we can ignore this case.
     return;
   }
-  // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
-  // This might also help by not causing recalcing each time we move a child from here to the target.
-  contentNodeOuter.parentNode.removeChild(contentNodeOuter);
 
   // Find the fallback's first element.
   const suspenseIdNodeOuter = document.getElementById(suspenseBoundaryID);
   if (!suspenseIdNodeOuter) {
+    // We'll never reveal this boundary so we can remove its content immediately.
+    // Otherwise we'll leave it in until we reveal it.
+    // This is important in case this specific boundary contains other boundaries
+    // that may get completed before we reveal this one.
+    contentNodeOuter.parentNode.removeChild(contentNodeOuter);
+
     // The user must have already navigated away from this tree.
     // E.g. because the parent was hydrated. That's fine there's nothing to do
     // but we have to make sure that we already deleted the container node.