[pull] main from react:main

fixtures/view-transition/server/render.js

@@ -2,6 +2,9 @@ import React from 'react';
 import {renderToPipeableStream} from 'react-dom/server';
 
 import App from '../src/components/App.js';
+import {resetFeedReveal} from '../src/components/NestedParentExit.js';
+import {resetPageReveal} from '../src/components/Page.js';
+import {resetNestedReveal} from '../src/components/NestedReveal.js';
 
 let assets;
 if (process.env.NODE_ENV === 'development') {
@@ -15,6 +18,10 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 export default function render(url, res) {
+  // Force resuspend on every load
+  resetFeedReveal();
+  resetPageReveal();
+  resetNestedReveal();
   res.socket.on('error', error => {
     // Log fatal errors
     console.error('Fatal', error);

fixtures/view-transition/src/components/NestedParentExit.css

@@ -210,3 +210,52 @@
 ::view-transition-old(.nested-back-btn-exit):only-child {
   animation: nested-back-btn-exit 200ms ease-in forwards;
 }
+
+/* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
+.feed-item-skeleton {
+  cursor: default;
+}
+
+.skeleton-line {
+  background: #ddd;
+  border-radius: 4px;
+}
+
+.skeleton-title {
+  height: 15px;
+  width: 60%;
+  margin: 0 0 0.35rem;
+}
+
+.skeleton-body {
+  height: 13px;
+  width: 90%;
+}
+
+@keyframes nested-feed-enter {
+  from {
+    opacity: 0;
+    translate: 0 20px;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+::view-transition-new(.nested-feed-enter) {
+  animation: nested-feed-enter 450ms ease-out both;
+}
+
+@keyframes nested-feed-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+::view-transition-old(.nested-feed-exit) {
+  animation: nested-feed-exit 300ms ease-in forwards;
+}

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

@@ -1,5 +1,7 @@
 import React, {
   ViewTransition,
+  Suspense,
+  use,
   useState,
   useOptimistic,
   startTransition,
@@ -14,6 +16,45 @@ const items = [
   {id: 3, title: 'Third Post', body: 'Hello from the third post.'},
 ];
 
+let feedRevealPromise = null;
+
+export function resetFeedReveal() {
+  feedRevealPromise = null;
+}
+
+function FeedReveal() {
+  if (feedRevealPromise === null) {
+    feedRevealPromise = new Promise(resolve => setTimeout(resolve, 1000));
+  }
+  use(feedRevealPromise);
+  return null;
+}
+
+function FeedSkeleton() {
+  return (
+    <ViewTransition exit="nested-feed-exit">
+      <div className="nested-feed">
+        {items.map(item => (
+          // Mirrors FeedItem: each skeleton row relays the exit (level 1), and
+          // its title/body placeholders relay again (level 2) so they animate
+          // out separately from the row — up and to the right. This exercises
+          // the nested parentExit relay through the SSR streaming reveal.
+          <ViewTransition key={item.id} parentExit="nested-exit-left">
+            <div className="feed-item feed-item-skeleton">
+              <ViewTransition parentExit="nested-title-exit-up">
+                <div className="feed-item-title skeleton-line skeleton-title" />
+              </ViewTransition>
+              <ViewTransition parentExit="nested-body-exit-right">
+                <div className="skeleton-line skeleton-body" />
+              </ViewTransition>
+            </div>
+          </ViewTransition>
+        ))}
+      </div>
+    </ViewTransition>
+  );
+}
+
 function logGestureParent(kind, title, _timeline, _options, _instance, types) {
   // eslint-disable-next-line no-console
   console.log(`[NestedParentExit] onGestureParent${kind}`, title, types);
@@ -159,17 +200,26 @@ export default function NestedParentExit() {
               {selected ? (
                 <Detail item={selected} onBack={goBack} />
               ) : (
-                <>
-                  {items.map((item, index) => (
-                    <FeedItem
-                      key={item.id}
-                      item={item}
-                      index={index}
-                      activeIndex={activeIndex}
-                      onSelect={goToDetail}
-                    />
-                  ))}
-                </>
+                <Suspense fallback={<FeedSkeleton />}>
+                  {/* The entering ViewTransition is the direct child of the
+                      Suspense content, so it activates an enter scope and the
+                      feed items below relay parentEnter (emitting
+                      vt-parent-enter annotations in Fizz). */}
+                  <ViewTransition enter="nested-feed-enter">
+                    <div className="nested-feed">
+                      {items.map((item, index) => (
+                        <FeedItem
+                          key={item.id}
+                          item={item}
+                          index={index}
+                          activeIndex={activeIndex}
+                          onSelect={goToDetail}
+                        />
+                      ))}
+                      <FeedReveal />
+                    </div>
+                  </ViewTransition>
+                </Suspense>
               )}
             </div>
           </ViewTransition>

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

@@ -12,6 +12,11 @@ function Use({useable}) {
 let delay1;
 let delay2;
 
+export function resetNestedReveal() {
+  delay1 = undefined;
+  delay2 = undefined;
+}
+
 export default function NestedReveal({}) {
   if (!delay1) {
     delay1 = sleep(100);

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

@@ -18,4 +18,45 @@
   top: 10px;
   left: 360px;
   border: 1px solid #ccc;
-}
+}
+
+.examples {
+  display: grid;
+  /* Wide enough that the demos (the ~340px swipe-recognizer boxes) fit without
+     overflowing once card + content padding is subtracted. */
+  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+  gap: 20px;
+  align-items: start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.example-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 320px;
+  background: #eee;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.example-card-title {
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.example-card-content {
+  flex: 1;
+  width: 100%;
+  background: #fff;
+  border-radius: 10px;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: auto;
+}