[Fizz] Delay detachment of completed boundaries until reveal (#33511)

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>
   );
 }