diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 330c8ab89c852..2d092ceb0ff06 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -901,6 +901,94 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
+    it('can override multiple Suspense simultaneously', async () => {
+      const Component = () => {
+        return <div>Hello</div>;
+      };
+      const App = () => (
+        <React.Fragment>
+          <Component key="Outside" />
+          <React.Suspense
+            name="parent"
+            fallback={<Component key="Parent Fallback" />}>
+            <Component key="Unrelated at Start" />
+            <React.Suspense
+              name="one"
+              fallback={<Component key="Suspense 1 Fallback" />}>
+              <Component key="Suspense 1 Content" />
+            </React.Suspense>
+            <React.Suspense
+              name="two"
+              fallback={<Component key="Suspense 2 Fallback" />}>
+              <Component key="Suspense 2 Content" />
+            </React.Suspense>
+            <React.Suspense
+              name="three"
+              fallback={<Component key="Suspense 3 Fallback" />}>
+              <Component key="Suspense 3 Content" />
+            </React.Suspense>
+            <Component key="Unrelated at End" />
+          </React.Suspense>
+        </React.Fragment>
+      );
+
+      await actAsync(() => render(<App />));
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Component key="Suspense 3 Content">
+                <Component key="Unrelated at End">
+        [shell]
+          <Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
+            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+
+      const rendererID = getRendererID();
+      const rootID = store.getRootIDForElement(store.getElementIDAtIndex(0));
+      await actAsync(() => {
+        agent.overrideSuspenseMilestone({
+          rendererID,
+          rootID,
+          suspendedSet: [
+            store.getElementIDAtIndex(4),
+            store.getElementIDAtIndex(8),
+          ],
+        });
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Component key="Outside">
+            ▾ <Suspense name="parent">
+                <Component key="Unrelated at Start">
+              ▾ <Suspense name="one">
+                  <Component key="Suspense 1 Fallback">
+              ▾ <Suspense name="two">
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense name="three">
+                  <Component key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+        [shell]
+          <Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
+            <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
+            <Suspense name="three" rects={[{x:1,y:2,width:5,height:1}]}>
+      `);
+    });
+
     it('should display a partially rendered SuspenseList', async () => {
       const Loading = () => <div>Loading...</div>;
       const SuspendingComponent = () => {
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 1ae7f5dfb11b7..98091a06d6a8f 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -130,6 +130,12 @@ type OverrideSuspenseParams = {
   forceFallback: boolean,
 };
 
+type OverrideSuspenseMilestoneParams = {
+  rendererID: number,
+  rootID: number,
+  suspendedSet: Array<number>,
+};
+
 type PersistedSelection = {
   rendererID: number,
   path: Array<PathFrame>,
@@ -198,6 +204,10 @@ export default class Agent extends EventEmitter<{
     bridge.addListener('logElementToConsole', this.logElementToConsole);
     bridge.addListener('overrideError', this.overrideError);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
+    bridge.addListener(
+      'overrideSuspenseMilestone',
+      this.overrideSuspenseMilestone,
+    );
     bridge.addListener('overrideValueAtPath', this.overrideValueAtPath);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
     bridge.addListener('renamePath', this.renamePath);
@@ -556,6 +566,21 @@ export default class Agent extends EventEmitter<{
     }
   };
 
+  overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({
+    rendererID,
+    rootID,
+    suspendedSet,
+  }) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(
+        `Invalid renderer id "${rendererID}" to override suspense milestone`,
+      );
+    } else {
+      renderer.overrideSuspenseMilestone(rootID, suspendedSet);
+    }
+  };
+
   overrideValueAtPath: OverrideValueAtPathParams => void = ({
     hookID,
     id,
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index d2f5c801aab7a..7fd7000d440cb 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -2366,6 +2366,7 @@ export function attach(
         !isProductionBuildOfRenderer && StrictModeBits !== 0 ? 1 : 0,
       );
       pushOperation(hasOwnerMetadata ? 1 : 0);
+      pushOperation(supportsTogglingSuspense ? 1 : 0);
 
       if (isProfiling) {
         if (displayNamesByRootID !== null) {
@@ -7455,13 +7456,6 @@ export function attach(
   }
 
   function overrideSuspense(id: number, forceFallback: boolean) {
-    if (!supportsTogglingSuspense) {
-      // TODO:: Add getter to decide if overrideSuspense is available.
-      // Currently only available on inspectElement.
-      // Probably need a different affordance to batch since the timeline
-      // fallback is not the same as resuspending.
-      return;
-    }
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'
@@ -7506,6 +7500,58 @@ export function attach(
     scheduleUpdate(fiber);
   }
 
+  /**
+   * Resets the all other roots of this renderer.
+   * @param rootID The root that contains this milestone
+   * @param suspendedSet List of IDs of SuspenseComponent Fibers
+   */
+  function overrideSuspenseMilestone(
+    rootID: FiberInstance['id'],
+    suspendedSet: Array<FiberInstance['id']>,
+  ) {
+    if (
+      typeof setSuspenseHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideSuspenseMilestone() to not get called for earlier React versions.',
+      );
+    }
+
+    // TODO: Allow overriding the timeline for the specified root.
+    forceFallbackForFibers.clear();
+
+    for (let i = 0; i < suspendedSet.length; ++i) {
+      const instance = idToDevToolsInstanceMap.get(suspendedSet[i]);
+      if (instance === undefined) {
+        console.warn(
+          `Could not suspend ID '${suspendedSet[i]}' since the instance can't be found.`,
+        );
+        continue;
+      }
+
+      if (instance.kind === FIBER_INSTANCE) {
+        const fiber = instance.data;
+        forceFallbackForFibers.add(fiber);
+        // We could find a minimal set that covers all the Fibers in this suspended set.
+        // For now we rely on React's batching of updates.
+        scheduleUpdate(fiber);
+      } else {
+        console.warn(`Cannot not suspend ID '${suspendedSet[i]}'.`);
+      }
+    }
+
+    if (forceFallbackForFibers.size > 0) {
+      // First override is added. Switch React to slower path.
+      // TODO: Semantics for suspending a timeline are different. We want a suspended
+      // timeline to act like a first reveal which is relevant for SuspenseList.
+      // Resuspending would not affect rows in SuspenseList
+      setSuspenseHandler(shouldSuspendFiberAccordingToSet);
+    } else {
+      setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+    }
+  }
+
   // Remember if we're trying to restore the selection after reload.
   // In that case, we'll do some extra checks for matching mounts.
   let trackedPath: Array<PathFrame> | null = null;
@@ -8006,6 +8052,7 @@ export function attach(
     onErrorOrWarning,
     overrideError,
     overrideSuspense,
+    overrideSuspenseMilestone,
     overrideValueAtPath,
     renamePath,
     renderer,
@@ -8014,6 +8061,7 @@ export function attach(
     startProfiling,
     stopProfiling,
     storeAsGlobal,
+    supportsTogglingSuspense,
     updateComponentFilters,
     getEnvironmentNames,
     ...internalMcpFunctions,
diff --git a/packages/react-devtools-shared/src/backend/flight/renderer.js b/packages/react-devtools-shared/src/backend/flight/renderer.js
index 9cdd63e150f7c..75763b1f18499 100644
--- a/packages/react-devtools-shared/src/backend/flight/renderer.js
+++ b/packages/react-devtools-shared/src/backend/flight/renderer.js
@@ -140,6 +140,8 @@ export function attach(
     // The changes will be flushed later when we commit this tree to Fiber.
   }
 
+  const supportsTogglingSuspense = false;
+
   return {
     cleanup() {},
     clearErrorsAndWarnings() {},
@@ -202,6 +204,7 @@ export function attach(
     onErrorOrWarning,
     overrideError() {},
     overrideSuspense() {},
+    overrideSuspenseMilestone() {},
     overrideValueAtPath() {},
     renamePath() {},
     renderer,
@@ -210,6 +213,7 @@ export function attach(
     startProfiling() {},
     stopProfiling() {},
     storeAsGlobal() {},
+    supportsTogglingSuspense,
     updateComponentFilters() {},
     getEnvironmentNames() {
       return [];
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index d1623ff24bfdd..2915d2cd30554 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -180,6 +180,8 @@ export function attach(
     };
   }
 
+  const supportsTogglingSuspense = false;
+
   function getDisplayNameForElementID(id: number): string | null {
     const internalInstance = idToInternalInstanceMap.get(id);
     return internalInstance ? getData(internalInstance).displayName : null;
@@ -408,6 +410,7 @@ export function attach(
       pushOperation(0); // Profiling flag
       pushOperation(0); // StrictMode supported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
+      pushOperation(supportsTogglingSuspense ? 1 : 0);
     } else {
       const type = getElementType(internalInstance);
       const {displayName, key} = getData(internalInstance);
@@ -1070,6 +1073,9 @@ export function attach(
   const overrideSuspense = () => {
     throw new Error('overrideSuspense not supported by this renderer');
   };
+  const overrideSuspenseMilestone = () => {
+    throw new Error('overrideSuspenseMilestone not supported by this renderer');
+  };
   const startProfiling = () => {
     // Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.
   };
@@ -1153,6 +1159,7 @@ export function attach(
     logElementToConsole,
     overrideError,
     overrideSuspense,
+    overrideSuspenseMilestone,
     overrideValueAtPath,
     renamePath,
     getElementAttributeByPath,
@@ -1163,6 +1170,7 @@ export function attach(
     startProfiling,
     stopProfiling,
     storeAsGlobal,
+    supportsTogglingSuspense,
     updateComponentFilters,
     getEnvironmentNames,
   };
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 12b082aeb2e55..9d3e5a0d04e25 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -437,6 +437,10 @@ export type RendererInterface = {
   onErrorOrWarning?: OnErrorOrWarning,
   overrideError: (id: number, forceError: boolean) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
+  overrideSuspenseMilestone: (
+    rootID: number,
+    suspendedSet: Array<number>,
+  ) => void,
   overrideValueAtPath: (
     type: Type,
     id: number,
@@ -469,6 +473,7 @@ export type RendererInterface = {
     path: Array<string | number>,
     count: number,
   ) => void,
+  supportsTogglingSuspense: boolean,
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
   getEnvironmentNames: () => Array<string>,
 
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index ccc66744a7046..616f2d3d3ec23 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -27,7 +27,7 @@ export type BridgeProtocol = {
   // Version supported by the current frontend/backend.
   version: number,
 
-  // NPM version range that also supports this version.
+  // NPM version range of `react-devtools-inline` that also supports this version.
   // Note that 'maxNpmVersion' is only set when the version is bumped.
   minNpmVersion: string,
   maxNpmVersion: string | null,
@@ -65,6 +65,12 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
   {
     version: 2,
     minNpmVersion: '4.22.0',
+    maxNpmVersion: '6.2.0',
+  },
+  // Version 3 adds supports-toggling-suspense bit to add-root
+  {
+    version: 3,
+    minNpmVersion: '6.2.0',
     maxNpmVersion: null,
   },
 ];
@@ -134,6 +140,12 @@ type OverrideSuspense = {
   forceFallback: boolean,
 };
 
+type OverrideSuspenseMilestone = {
+  rendererID: number,
+  rootID: number,
+  suspendedSet: Array<number>,
+};
+
 type CopyElementPathParams = {
   ...ElementAndRendererID,
   path: Array<string | number>,
@@ -231,6 +243,7 @@ type FrontendEvents = {
   logElementToConsole: [ElementAndRendererID],
   overrideError: [OverrideError],
   overrideSuspense: [OverrideSuspense],
+  overrideSuspenseMilestone: [OverrideSuspenseMilestone],
   overrideValueAtPath: [OverrideValueAtPath],
   profilingData: [ProfilingDataBackend],
   reloadAndProfile: [ReloadAndProfilingParams],
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 664b65bf7d7a8..02e60a080af3e 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -89,6 +89,7 @@ export type Capabilities = {
   supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
   supportsStrictMode: boolean,
+  supportsTogglingSuspense: boolean,
   supportsTimeline: boolean,
 };
 
@@ -491,6 +492,14 @@ export default class Store extends EventEmitter<{
     );
   }
 
+  supportsTogglingSuspense(rootID: Element['id']): boolean {
+    const capabilities = this._rootIDToCapabilities.get(rootID);
+    if (capabilities === undefined) {
+      throw new Error(`No capabilities registered for root ${rootID}`);
+    }
+    return capabilities.supportsTogglingSuspense;
+  }
+
   // This build of DevTools supports the Timeline profiler.
   // This is a static flag, controlled by the Store config.
   get supportsTimeline(): boolean {
@@ -1080,6 +1089,7 @@ export default class Store extends EventEmitter<{
 
             let supportsStrictMode = false;
             let hasOwnerMetadata = false;
+            let supportsTogglingSuspense = false;
 
             // If we don't know the bridge protocol, guess that we're dealing with the latest.
             // If we do know it, we can take it into consideration when parsing operations.
@@ -1092,6 +1102,9 @@ export default class Store extends EventEmitter<{
 
               hasOwnerMetadata = operations[i] > 0;
               i++;
+
+              supportsTogglingSuspense = operations[i] > 0;
+              i++;
             }
 
             this._roots = this._roots.concat(id);
@@ -1100,6 +1113,7 @@ export default class Store extends EventEmitter<{
               supportsBasicProfiling,
               hasOwnerMetadata,
               supportsStrictMode,
+              supportsTogglingSuspense,
               supportsTimeline,
             });
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index e0bd4e7c73c5e..4b4e721ced61c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -208,6 +208,7 @@ function updateTree(
           i++; // Profiling flag
           i++; // supportsStrictMode flag
           i++; // hasOwnerMetadata flag
+          i++; // supportsTogglingSuspense flag
 
           if (__DEBUG__) {
             debug('Add', `new root fiber ${id}`);
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
index 65fa4dec07396..b1c30a32300ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
@@ -55,7 +55,7 @@ function SuspenseRects({
 
   const suspense = store.getSuspenseByID(suspenseID);
   if (suspense === null) {
-    console.warn(`<Element> Could not find suspense node id ${suspenseID}`);
+    // getSuspenseByID will have already warned
     return null;
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
index 3a7bb0735012b..dc82b25da2178 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
@@ -115,4 +115,5 @@
 
 .Timeline {
   flex-grow: 1;
+  align-self: anchor-center;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index 9df107feab354..a65a03efb4493 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -295,7 +295,7 @@ function SuspenseTab(_: {}) {
           ref={resizeTreeListRef}>
           <SuspenseTreeList />
         </div>
-        <div className={styles.ResizeBarWrapper}>
+        <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
           <div
             onPointerDown={onResizeStart}
             onPointerMove={onResizeTreeList}
@@ -327,7 +327,7 @@ function SuspenseTab(_: {}) {
           </footer>
         </div>
       </div>
-      <div className={styles.ResizeBarWrapper}>
+      <div className={styles.ResizeBarWrapper} hidden={inspectedElementHidden}>
         <div
           onPointerDown={onResizeStart}
           onPointerMove={onResizeTree}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
index f07f4efb2c8eb..5c053d9c733e6 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
@@ -1,5 +1,18 @@
-.SuspenseTimelineSlider {
+.SuspenseTimelineContainer {
   width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.SuspenseTimelineInput {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.SuspenseTimelineRootSwitcher {
+  height: fit-content;
+  max-width: 3rem;
 }
 
 .SuspenseTimelineMarkers {
@@ -18,3 +31,4 @@
 .SuspenseTimelineActiveMarker {
   visibility: visible;
 }
+
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 413760d0786fe..78a2bd11359cc 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -29,34 +29,38 @@ import typeof {
   SyntheticPointerEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
 
-// TODO: This returns the roots which would mean we attempt to suspend the shell.
-// Suspending the shell is currently not supported and we don't have a good view
-// for inspecting the root. But we probably should?
-function getDocumentOrderSuspense(
+function getSuspendableDocumentOrderSuspense(
   store: Store,
-  roots: $ReadOnlyArray<Element['id']>,
+  rootID: Element['id'] | void,
 ): Array<SuspenseNode> {
+  if (rootID === undefined) {
+    return [];
+  }
+  const root = store.getElementByID(rootID);
+  if (root === null) {
+    return [];
+  }
+  if (!store.supportsTogglingSuspense(root.id)) {
+    return [];
+  }
   const suspenseTreeList: SuspenseNode[] = [];
-  for (let i = 0; i < roots.length; i++) {
-    const root = store.getElementByID(roots[i]);
-    if (root === null) {
-      continue;
-    }
-    const suspense = store.getSuspenseByID(root.id);
-    if (suspense !== null) {
-      const stack = [suspense];
-      while (stack.length > 0) {
-        const current = stack.pop();
-        if (current === undefined) {
-          continue;
-        }
+  const suspense = store.getSuspenseByID(root.id);
+  if (suspense !== null) {
+    const stack = [suspense];
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (current === undefined) {
+        continue;
+      }
+      // Don't include the root. It's currently not supported to suspend the shell.
+      if (current !== suspense) {
         suspenseTreeList.push(current);
-        // Add children in reverse order to maintain document order
-        for (let j = current.children.length - 1; j >= 0; j--) {
-          const childSuspense = store.getSuspenseByID(current.children[j]);
-          if (childSuspense !== null) {
-            stack.push(childSuspense);
-          }
+      }
+      // Add children in reverse order to maintain document order
+      for (let j = current.children.length - 1; j >= 0; j--) {
+        const childSuspense = store.getSuspenseByID(current.children[j]);
+        if (childSuspense !== null) {
+          stack.push(childSuspense);
         }
       }
     }
@@ -65,22 +69,24 @@ function getDocumentOrderSuspense(
   return suspenseTreeList;
 }
 
-export default function SuspenseTimeline(): React$Node {
+function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const dispatch = useContext(TreeDispatcherContext);
-  const {shells} = useContext(SuspenseTreeStateContext);
-
-  const timeline = useMemo(() => {
-    return getDocumentOrderSuspense(store, shells);
-  }, [store, shells]);
-
   const {highlightHostInstance, clearHighlightHostInstance} =
     useHighlightHostInstance();
 
+  const timeline = useMemo(() => {
+    return getSuspendableDocumentOrderSuspense(store, rootID);
+  }, [store, rootID]);
+
   const inputRef = useRef<HTMLElement | null>(null);
   const inputBBox = useRef<ClientRect | null>(null);
   useLayoutEffect(() => {
+    if (timeline.length === 0) {
+      return;
+    }
+
     const input = inputRef.current;
     if (input === null) {
       throw new Error('Expected an input HTML element to be present.');
@@ -95,12 +101,12 @@ export default function SuspenseTimeline(): React$Node {
       inputBBox.current = null;
       observer.disconnect();
     };
-  }, []);
+  }, [timeline.length]);
 
   const min = 0;
   const max = timeline.length > 0 ? timeline.length - 1 : 0;
-
   const [value, setValue] = useState(max);
+
   if (value > max) {
     // TODO: Handle timeline changes
     setValue(max);
@@ -130,6 +136,26 @@ export default function SuspenseTimeline(): React$Node {
     });
   }, [timeline, value]);
 
+  if (rootID === undefined) {
+    return <div className={styles.SuspenseTimelineInput}>Root not found.</div>;
+  }
+
+  if (!store.supportsTogglingSuspense(rootID)) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>
+        Can't step through Suspense in production apps.
+      </div>
+    );
+  }
+
+  if (timeline.length === 0) {
+    return (
+      <div className={styles.SuspenseTimelineInput}>
+        Root contains no Suspense nodes.
+      </div>
+    );
+  }
+
   function handleChange(event: SyntheticEvent) {
     const pendingValue = +event.currentTarget.value;
     for (let i = 0; i < timeline.length; i++) {
@@ -193,7 +219,7 @@ export default function SuspenseTimeline(): React$Node {
   }
 
   return (
-    <div>
+    <div className={styles.SuspenseTimelineInput}>
       <input
         className={styles.SuspenseTimelineSlider}
         type="range"
@@ -214,3 +240,54 @@ export default function SuspenseTimeline(): React$Node {
     </div>
   );
 }
+
+export default function SuspenseTimeline(): React$Node {
+  const store = useContext(StoreContext);
+  const {shells} = useContext(SuspenseTreeStateContext);
+
+  const defaultSelectedRootID = shells.find(rootID => {
+    const suspense = store.getSuspenseByID(rootID);
+    return (
+      store.supportsTogglingSuspense(rootID) &&
+      suspense !== null &&
+      suspense.children.length > 1
+    );
+  });
+  const [selectedRootID, setSelectedRootID] = useState(defaultSelectedRootID);
+
+  if (selectedRootID === undefined && defaultSelectedRootID !== undefined) {
+    setSelectedRootID(defaultSelectedRootID);
+  }
+
+  function handleChange(event: SyntheticEvent) {
+    const newRootID = +event.currentTarget.value;
+    // TODO: scrollIntoView both suspense rects and host instance.
+    setSelectedRootID(newRootID);
+  }
+
+  return (
+    <div className={styles.SuspenseTimelineContainer}>
+      <SuspenseTimelineInput key={selectedRootID} rootID={selectedRootID} />
+      {shells.length > 0 && (
+        <select
+          aria-label="Select Suspense Root"
+          className={styles.SuspenseTimelineRootSwitcher}
+          onChange={handleChange}>
+          {shells.map(rootID => {
+            // TODO: Use name
+            const name = '#' + rootID;
+            // TODO: Highlight host on hover
+            return (
+              <option
+                key={rootID}
+                selected={rootID === selectedRootID}
+                value={rootID}>
+                {name}
+              </option>
+            );
+          })}
+        </select>
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index a16c93a4573e7..42f903ae09b6a 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -81,7 +81,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
 
   useEffect(() => {
     const handleSuspenseTreeMutated = () => {
-      transitionDispatch({
+      dispatch({
         type: 'HANDLE_SUSPENSE_TREE_MUTATION',
       });
     };
@@ -91,7 +91,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
       // At the moment, we can treat this as a mutation.
       // We don't know which Elements were newly added/removed, but that should be okay in this case.
       // It would only impact the search state, which is unlikely to exist yet at this point.
-      transitionDispatch({
+      dispatch({
         type: 'HANDLE_SUSPENSE_TREE_MUTATION',
       });
     }
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
index d06038ad93e38..c9521431fce1b 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -136,9 +136,9 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
 }
 
 type Section = {
-  +generatedColumn: number,
-  +generatedLine: number,
-  +map: MixedSourceMap,
+  +offsetColumn0: number,
+  +offsetLine0: number,
+  +map: BasicSourceMap,
 
   // Lazily parsed only when/as the section is needed.
   sourceMapConsumer: SourceMapConsumerType | null,
@@ -160,12 +160,12 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
       column: number,
       ...
     } = section.offset;
-    const offsetLine = offset.line;
-    const offsetColumn = offset.column;
+    const offsetLine0 = offset.line;
+    const offsetColumn0 = offset.column;
 
     if (
-      offsetLine < lastOffset.line ||
-      (offsetLine === lastOffset.line && offsetColumn < lastOffset.column)
+      offsetLine0 < lastOffset.line ||
+      (offsetLine0 === lastOffset.line && offsetColumn0 < lastOffset.column)
     ) {
       throw new Error('Section offsets must be ordered and non-overlapping.');
     }
@@ -173,9 +173,8 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
     lastOffset = offset;
 
     return {
-      // The offset fields are 0-based, but we use 1-based indices when encoding/decoding from VLQ.
-      generatedLine: offsetLine + 1,
-      generatedColumn: offsetColumn + 1,
+      offsetLine0,
+      offsetColumn0,
       map: section.map,
       sourceMapConsumer: null,
     };
@@ -186,55 +185,29 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
     lineNumber,
   }: SearchPosition): ResultPosition {
     // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-    const targetColumnNumber = columnNumber - 1;
-
-    let section = null;
-
-    let startIndex = 0;
-    let stopIndex = sections.length - 1;
-    let index = -1;
-    while (startIndex <= stopIndex) {
-      index = Math.floor((stopIndex + startIndex) / 2);
-      section = sections[index];
-
-      const currentLine = section.generatedLine;
-      if (currentLine === lineNumber) {
-        const currentColumn = section.generatedColumn;
-        if (currentColumn === lineNumber) {
-          break;
-        } else {
-          if (currentColumn > targetColumnNumber) {
-            if (stopIndex - index > 0) {
-              stopIndex = index;
-            } else {
-              index = stopIndex;
-              break;
-            }
-          } else {
-            if (index - startIndex > 0) {
-              startIndex = index;
-            } else {
-              index = startIndex;
-              break;
-            }
-          }
-        }
+    const column0 = columnNumber - 1;
+    const line0 = lineNumber - 1;
+
+    // Sections must not overlap and must be sorted: https://tc39.es/source-map/#section-object
+    // Therefore the last section that has an offset less than or equal to the frame is the applicable one.
+    let left = 0;
+    let right = sections.length - 1;
+    let section: Section | null = null;
+
+    while (left <= right) {
+      // fast Math.floor
+      const middle = ~~((left + right) / 2);
+      const currentSection = sections[middle];
+
+      if (
+        currentSection.offsetLine0 < line0 ||
+        (currentSection.offsetLine0 === line0 &&
+          currentSection.offsetColumn0 <= column0)
+      ) {
+        section = currentSection;
+        left = middle + 1;
       } else {
-        if (currentLine > lineNumber) {
-          if (stopIndex - index > 0) {
-            stopIndex = index;
-          } else {
-            index = stopIndex;
-            break;
-          }
-        } else {
-          if (index - startIndex > 0) {
-            startIndex = index;
-          } else {
-            index = startIndex;
-            break;
-          }
-        }
+        right = middle - 1;
       }
     }
 
@@ -252,8 +225,9 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
     }
 
     return section.sourceMapConsumer.originalPositionFor({
-      columnNumber,
-      lineNumber,
+      // The mappings in a Source Map section are relative to the section offset.
+      columnNumber: columnNumber - section.offsetColumn0,
+      lineNumber: lineNumber - section.offsetLine0,
     });
   }
 
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
index 450cd608aa61e..42389b56b0501 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
@@ -29,7 +29,7 @@ export type BasicSourceMap = {
 };
 
 export type IndexSourceMapSection = {
-  map: IndexSourceMap | BasicSourceMap,
+  map: BasicSourceMap,
   offset: {
     line: number,
     column: number,
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 34c258ebe2b98..b404608e5573d 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -261,6 +261,7 @@ export function printOperationsArray(operations: Array<number>) {
           i++; // supportsProfiling
           i++; // supportsStrictMode
           i++; // hasOwnerMetadata
+          i++; // supportsTogglingSuspense
         } else {
           const parentID = ((operations[i]: any): number);
           i++;
diff --git a/packages/react-devtools-shell/index.html b/packages/react-devtools-shell/index.html
index ce381a7345325..87352e2f82f35 100644
--- a/packages/react-devtools-shell/index.html
+++ b/packages/react-devtools-shell/index.html
@@ -8,9 +8,9 @@
   <style>
     #panes {
       display: grid;
-      height: 100%;
-      width: 100%;
+      gap: 5px;
       position: relative;
+      overflow: hidden;
     }
 
     #divider {
@@ -41,21 +41,21 @@
       height: 100%;
       width: 100%;
       border: none;
+      overflow-y: auto;
     }
 
     #devtools {
       height: 100%;
       width: 100%;
-      overflow: hidden;
+      overflow-y: auto;
       z-index: 10000001;
     }
 
     body {
-      display: flex;
       height: 100vh;
       width: 100vw;
-      contain: strict;
-      flex-direction: column;
+      display: grid;
+      grid-template-rows: auto 1fr;
       margin: 0;
       padding: 0;
       font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
@@ -128,11 +128,13 @@
     function setLayout(layoutType, splitRatio) {
       const panes = document.getElementById('panes');
       if (layoutType === 'topbottom') {
-        panes.style.gridTemplateColumns = '100%'; // Full width for each row
-        panes.style.gridTemplateRows = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;
+        panes.style.setProperty('--top-row-height', `${splitRatio * 100}%`);
+        panes.style.gridTemplateRows = "var(--top-row-height) 1fr";
+        panes.style.gridTemplateColumns = null;
       } else if (layoutType === 'leftright') {
-        panes.style.gridTemplateRows = '100%'; // Full height for each column
-        panes.style.gridTemplateColumns = `${splitRatio * 100}% ${(1 - splitRatio) * 100}%`;
+        panes.style.setProperty('--left-column-width', `${splitRatio * 100}%`);
+        panes.style.gridTemplateRows = null;
+        panes.style.gridTemplateColumns = "var(--left-column-width) 1fr";
       }
     }
     layout.addEventListener('change', () => {
@@ -147,12 +149,12 @@
       if (layoutType === 'topbottom') {
         // For top/bottom layout, divider should be horizontal (spanning across)
         divider.className = 'horizontal-divider';
-        divider.style.top = `calc(${splitRatio * 100}% - 2.5px)`;
+        divider.style.top = `calc(${splitRatio * 100}%)`;
         divider.style.left = '0';
       } else {
         // For left/right layout, divider should be vertical (spanning down)
         divider.className = 'vertical-divider';
-        divider.style.left = `calc(${splitRatio * 100}% - 2.5px)`;
+        divider.style.left = `calc(${splitRatio * 100}%)`;
         divider.style.top = '0';
       }
     }
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 8155704d689ee..e3dac2e27e206 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -3580,7 +3580,14 @@ function canHydrateHydrationBoundary(
   inRootOrSingleton: boolean,
 ): null | SuspenseInstance | ActivityInstance {
   while (instance.nodeType !== COMMENT_NODE) {
-    if (!inRootOrSingleton) {
+    if (
+      instance.nodeType === ELEMENT_NODE &&
+      instance.nodeName === 'INPUT' &&
+      (instance: any).type === 'hidden'
+    ) {
+      // If we have extra hidden inputs, we don't mismatch. This allows us to
+      // embed extra form data in the original form.
+    } else if (!inRootOrSingleton) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
index 651b24a572957..3210f04221fd6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
@@ -23,6 +23,7 @@ let container;
 let React;
 let ReactDOMServer;
 let ReactDOMClient;
+let Suspense;
 let useFormStatus;
 let useOptimistic;
 let useActionState;
@@ -35,6 +36,7 @@ describe('ReactDOMFizzForm', () => {
     React = require('react');
     ReactDOMServer = require('react-dom/server.browser');
     ReactDOMClient = require('react-dom/client');
+    Suspense = React.Suspense;
     useFormStatus = require('react-dom').useFormStatus;
     useOptimistic = require('react').useOptimistic;
     act = require('internal-test-utils').act;
@@ -588,6 +590,7 @@ describe('ReactDOMFizzForm', () => {
     function App() {
       return (
         <form action={action} ref={ref} method={null}>
+          <Suspense />
           <input type="text" name="foo" defaultValue="bar" />
         </form>
       );
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
index c358694b63524..bd0e0dfa1436c 100644
--- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
+++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
@@ -101,6 +101,7 @@ function createResponseFromOptions(options: void | Options) {
 function startReadingFromUniversalStream(
   response: FlightResponse,
   stream: ReadableStream,
+  onDone: () => void,
 ): void {
   // This is the same as startReadingFromStream except this allows WebSocketStreams which
   // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
@@ -116,8 +117,7 @@ function startReadingFromUniversalStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      close(response);
-      return;
+      return onDone();
     }
     if (value instanceof ArrayBuffer) {
       // WebSockets can produce ArrayBuffer values in ReadableStreams.
@@ -139,7 +139,7 @@ function startReadingFromUniversalStream(
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -152,11 +152,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -178,10 +174,20 @@ function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromUniversalStream(response, options.debugChannel.readable);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
   return getRoot(response);
 }
@@ -199,13 +205,24 @@ function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
         startReadingFromUniversalStream(
           response,
           options.debugChannel.readable,
+          handleDone,
         );
-        startReadingFromStream(response, (r.body: any), true);
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
index f4b9ab4528d32..206ba2faea9f1 100644
--- a/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
+++ b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
@@ -63,7 +63,7 @@ export type Options = {
 function startReadingFromStream(
   response: Response,
   stream: Readable,
-  isSecondaryStream: boolean,
+  onEnd: () => void,
 ): void {
   const streamState = createStreamState();
 
@@ -79,13 +79,7 @@ function startReadingFromStream(
     reportGlobalError(response, error);
   });
 
-  stream.on('end', () => {
-    // If we're the secondary stream, then we don't close the response until the
-    // debug channel closes.
-    if (!isSecondaryStream) {
-      close(response);
-    }
-  });
+  stream.on('end', onEnd);
 }
 
 function createFromNodeStream<T>(
@@ -112,10 +106,16 @@ function createFromNodeStream<T>(
   );
 
   if (__DEV__ && options && options.debugChannel) {
-    startReadingFromStream(response, options.debugChannel, false);
-    startReadingFromStream(response, stream, true);
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
index 2efa754e467e1..c118077a08662 100644
--- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
@@ -102,6 +102,7 @@ function createDebugCallbackFromWritableStream(
 function startReadingFromUniversalStream(
   response: FlightResponse,
   stream: ReadableStream,
+  onDone: () => void,
 ): void {
   // This is the same as startReadingFromStream except this allows WebSocketStreams which
   // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
@@ -117,8 +118,7 @@ function startReadingFromUniversalStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      close(response);
-      return;
+      return onDone();
     }
     if (value instanceof ArrayBuffer) {
       // WebSockets can produce ArrayBuffer values in ReadableStreams.
@@ -140,7 +140,7 @@ function startReadingFromUniversalStream(
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -153,11 +153,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -208,10 +204,20 @@ export function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromUniversalStream(response, options.debugChannel.readable);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
   return getRoot(response);
 }
@@ -250,13 +256,24 @@ export function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
         startReadingFromUniversalStream(
           response,
           options.debugChannel.readable,
+          handleDone,
         );
-        startReadingFromStream(response, (r.body: any), true);
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
index dece127c3bc28..03c050f4cba3b 100644
--- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
@@ -102,7 +102,7 @@ function createResponseFromOptions(options?: Options) {
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -115,12 +115,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until
-      // the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -144,10 +139,16 @@ export function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromStream(response, options.debugChannel.readable, false);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
@@ -166,10 +167,24 @@ export function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
-        startReadingFromStream(response, options.debugChannel.readable, false);
-        startReadingFromStream(response, (r.body: any), true);
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
index 3e649bb4487d1..42e71c2c8a764 100644
--- a/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
+++ b/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
@@ -59,7 +59,7 @@ export type Options = {
 function startReadingFromStream(
   response: Response,
   stream: Readable,
-  isSecondaryStream: boolean,
+  onEnd: () => void,
 ): void {
   const streamState = createStreamState();
 
@@ -75,13 +75,7 @@ function startReadingFromStream(
     reportGlobalError(response, error);
   });
 
-  stream.on('end', () => {
-    // If we're the secondary stream, then we don't close the response until the
-    // debug channel closes.
-    if (!isSecondaryStream) {
-      close(response);
-    }
-  });
+  stream.on('end', onEnd);
 }
 
 export function createFromNodeStream<T>(
@@ -104,10 +98,16 @@ export function createFromNodeStream<T>(
   );
 
   if (__DEV__ && options && options.debugChannel) {
-    startReadingFromStream(response, options.debugChannel, false);
-    startReadingFromStream(response, stream, true);
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js
index 7530ac9101d2b..a62ce7b8e74e0 100644
--- a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMBrowser-test.js
@@ -14,14 +14,20 @@ import {patchMessageChannel} from '../../../../scripts/jest/patchMessageChannel'
 // Polyfills for test environment
 global.ReadableStream =
   require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.WritableStream =
+  require('web-streams-polyfill/ponyfill/es6').WritableStream;
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
 let React;
+let ReactDOMClient;
 let ReactServerDOMServer;
 let ReactServerDOMClient;
 let ReactServerScheduler;
+let act;
 let serverAct;
+let turbopackMap;
+let use;
 
 describe('ReactFlightTurbopackDOMBrowser', () => {
   beforeEach(() => {
@@ -36,16 +42,41 @@ describe('ReactFlightTurbopackDOMBrowser', () => {
     jest.mock('react-server-dom-turbopack/server', () =>
       require('react-server-dom-turbopack/server.browser'),
     );
+    const TurbopackMock = require('./utils/TurbopackMock');
+    turbopackMap = TurbopackMock.turbopackMap;
 
     ReactServerDOMServer = require('react-server-dom-turbopack/server.browser');
 
     __unmockReact();
     jest.resetModules();
 
+    ({act} = require('internal-test-utils'));
     React = require('react');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMClient = require('react-server-dom-turbopack/client');
+    use = React.use;
   });
 
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
   it('should resolve HTML using W3C streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -80,4 +111,56 @@ describe('ReactFlightTurbopackDOMBrowser', () => {
       ),
     });
   });
+
+  it('does not close the response early when using a fast debug channel', async () => {
+    function Component() {
+      return <div>Hi</div>;
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Component />, turbopackMap, {
+        debugChannel: {
+          writable: new WritableStream({
+            write(chunk) {
+              debugReadableStreamController.enqueue(chunk);
+            },
+            close() {
+              debugReadableStreamController.close();
+            },
+          }),
+        },
+      }),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div>Hi</div>');
+  });
 });
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
index 31df1b2a5fe6e..be3e7e476d91f 100644
--- a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
@@ -78,6 +78,26 @@ describe('ReactFlightTurbopackDOMEdge', () => {
     );
   }
 
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
   it('should allow an alternative module mapping to be used for SSR', async () => {
     function ClientComponent() {
       return <span>Client Component</span>;
@@ -165,6 +185,9 @@ describe('ReactFlightTurbopackDOMEdge', () => {
               write(chunk) {
                 debugReadableStreamController.enqueue(chunk);
               },
+              close() {
+                debugReadableStreamController.close();
+              },
             }),
           },
         },
@@ -184,10 +207,16 @@ describe('ReactFlightTurbopackDOMEdge', () => {
       moduleLoading: null,
     };
 
-    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
-      serverConsumerManifest,
-      debugChannel: {readable: debugReadableStream},
-    });
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        serverConsumerManifest,
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
 
     let ownerStack;
 
diff --git a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
index 8d31045522488..1fcf52fde4443 100644
--- a/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
+++ b/packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
@@ -90,6 +90,18 @@ describe('ReactFlightTurbopackDOMNode', () => {
     );
   }
 
+  function createDelayedStream() {
+    return new Stream.Transform({
+      ...streamOptions,
+      transform(chunk, encoding, callback) {
+        setTimeout(() => {
+          this.push(chunk);
+          callback();
+        });
+      },
+    });
+  }
+
   it('should allow an alternative module mapping to be used for SSR', async () => {
     function ClientComponent() {
       return <span>Client Component</span>;
@@ -180,12 +192,18 @@ describe('ReactFlightTurbopackDOMNode', () => {
               debugReadable.write(chunk, encoding);
               callback();
             },
+            final() {
+              debugReadable.end();
+            },
           }),
         },
       ),
     );
 
-    const readable = new Stream.PassThrough(streamOptions);
+    // Create a delayed stream to simulate that the RSC stream might be
+    // transported slower than the debug channel, which must not lead to a
+    // `controller.enqueueModel is not a function` error in the Flight client.
+    const readable = createDelayedStream();
 
     rscStream.pipe(readable);
 
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
index a9f31f1b765d5..1ca44135a4b8c 100644
--- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
@@ -100,6 +100,7 @@ function createResponseFromOptions(options: void | Options) {
 function startReadingFromUniversalStream(
   response: FlightResponse,
   stream: ReadableStream,
+  onDone: () => void,
 ): void {
   // This is the same as startReadingFromStream except this allows WebSocketStreams which
   // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
@@ -115,8 +116,7 @@ function startReadingFromUniversalStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      close(response);
-      return;
+      return onDone();
     }
     if (value instanceof ArrayBuffer) {
       // WebSockets can produce ArrayBuffer values in ReadableStreams.
@@ -138,7 +138,7 @@ function startReadingFromUniversalStream(
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -151,11 +151,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -178,10 +174,20 @@ function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromUniversalStream(response, options.debugChannel.readable);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
   return getRoot(response);
 }
@@ -199,13 +205,24 @@ function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
         startReadingFromUniversalStream(
           response,
           options.debugChannel.readable,
+          handleDone,
         );
-        startReadingFromStream(response, (r.body: any), true);
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
index 05144cfb76195..4c7e99d2149bc 100644
--- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
@@ -106,7 +106,7 @@ function createResponseFromOptions(options: Options) {
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -119,12 +119,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until
-      // the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -148,10 +143,16 @@ function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromStream(response, options.debugChannel.readable, false);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
@@ -170,10 +171,24 @@ function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
-        startReadingFromStream(response, options.debugChannel.readable, false);
-        startReadingFromStream(response, (r.body: any), true);
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
index f464f06499fa0..97e9be1bcddf6 100644
--- a/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
@@ -66,7 +66,7 @@ export type Options = {
 function startReadingFromStream(
   response: Response,
   stream: Readable,
-  isSecondaryStream: boolean,
+  onEnd: () => void,
 ): void {
   const streamState = createStreamState();
 
@@ -82,13 +82,7 @@ function startReadingFromStream(
     reportGlobalError(response, error);
   });
 
-  stream.on('end', () => {
-    // If we're the secondary stream, then we don't close the response until the
-    // debug channel closes.
-    if (!isSecondaryStream) {
-      close(response);
-    }
-  });
+  stream.on('end', onEnd);
 }
 
 function createFromNodeStream<T>(
@@ -114,10 +108,16 @@ function createFromNodeStream<T>(
   );
 
   if (__DEV__ && options && options.debugChannel) {
-    startReadingFromStream(response, options.debugChannel, false);
-    startReadingFromStream(response, stream, true);
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index eadb444914334..969bd493f3f47 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -12,6 +12,8 @@
 // Polyfills for test environment
 global.ReadableStream =
   require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.WritableStream =
+  require('web-streams-polyfill/ponyfill/es6').WritableStream;
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
@@ -152,6 +154,26 @@ describe('ReactFlightDOMBrowser', () => {
     return fn.apply(null, args);
   }
 
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
   it('should resolve HTML using W3C streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -2693,4 +2715,56 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(container.innerHTML).toBe('<div></div>');
   });
+
+  it('does not close the response early when using a fast debug channel', async () => {
+    function Component() {
+      return <div>Hi</div>;
+    }
+
+    let debugReadableStreamController;
+
+    const debugReadableStream = new ReadableStream({
+      start(controller) {
+        debugReadableStreamController = controller;
+      },
+    });
+
+    const rscStream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<Component />, webpackMap, {
+        debugChannel: {
+          writable: new WritableStream({
+            write(chunk) {
+              debugReadableStreamController.enqueue(chunk);
+            },
+            close() {
+              debugReadableStreamController.close();
+            },
+          }),
+        },
+      }),
+    );
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div>Hi</div>');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
index e987fa45ae3c9..bd93cc575653e 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
@@ -233,10 +233,10 @@ describe('ReactFlightDOMEdge', () => {
   }
 
   async function createBufferedUnclosingStream(
-    prelude: ReadableStream<Uint8Array>,
+    stream: ReadableStream<Uint8Array>,
   ): ReadableStream<Uint8Array> {
     const chunks: Array<Uint8Array> = [];
-    const reader = prelude.getReader();
+    const reader = stream.getReader();
     while (true) {
       const {done, value} = await reader.read();
       if (done) {
@@ -256,6 +256,26 @@ describe('ReactFlightDOMEdge', () => {
     });
   }
 
+  function createDelayedStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<Uint8Array> {
+    return new ReadableStream({
+      async start(controller) {
+        const reader = stream.getReader();
+        while (true) {
+          const {done, value} = await reader.read();
+          if (done) {
+            controller.close();
+          } else {
+            // Artificially delay between enqueuing chunks.
+            await new Promise(resolve => setTimeout(resolve));
+            controller.enqueue(value);
+          }
+        }
+      },
+    });
+  }
+
   it('should allow an alternative module mapping to be used for SSR', async () => {
     function ClientComponent() {
       return <span>Client Component</span>;
@@ -2012,6 +2032,9 @@ describe('ReactFlightDOMEdge', () => {
                 write(chunk) {
                   debugReadableStreamController.enqueue(chunk);
                 },
+                close() {
+                  debugReadableStreamController.close();
+                },
               }),
             },
           },
@@ -2032,10 +2055,16 @@ describe('ReactFlightDOMEdge', () => {
       moduleLoading: webpackModuleLoading,
     };
 
-    const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
-      serverConsumerManifest,
-      debugChannel: {readable: debugReadableStream},
-    });
+    const response = ReactServerDOMClient.createFromReadableStream(
+      // Create a delayed stream to simulate that the RSC stream might be
+      // transported slower than the debug channel, which must not lead to a
+      // `Connection closed` error in the Flight client.
+      createDelayedStream(rscStream),
+      {
+        serverConsumerManifest,
+        debugChannel: {readable: debugReadableStream},
+      },
+    );
 
     let ownerStack;
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
index fd2a806f9ee2b..2ee9bfa961c2b 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
@@ -128,10 +128,10 @@ describe('ReactFlightDOMNode', () => {
   }
 
   async function createBufferedUnclosingStream(
-    prelude: ReadableStream<Uint8Array>,
+    stream: ReadableStream<Uint8Array>,
   ): ReadableStream<Uint8Array> {
     const chunks: Array<Uint8Array> = [];
-    const reader = prelude.getReader();
+    const reader = stream.getReader();
     while (true) {
       const {done, value} = await reader.read();
       if (done) {
@@ -151,6 +151,19 @@ describe('ReactFlightDOMNode', () => {
     });
   }
 
+  function createDelayedStream() {
+    return new Stream.Transform({
+      ...streamOptions,
+      transform(chunk, encoding, callback) {
+        // Artificially delay between pushing chunks.
+        setTimeout(() => {
+          this.push(chunk);
+          callback();
+        });
+      },
+    });
+  }
+
   it('should support web streams in node', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -940,12 +953,18 @@ describe('ReactFlightDOMNode', () => {
               debugReadable.write(chunk, encoding);
               callback();
             },
+            final() {
+              debugReadable.end();
+            },
           }),
         },
       ),
     );
 
-    const readable = new Stream.PassThrough(streamOptions);
+    // Create a delayed stream to simulate that the RSC stream might be
+    // transported slower than the debug channel, which must not lead to a
+    // `controller.enqueueModel is not a function` error in the Flight client.
+    const readable = createDelayedStream();
 
     rscStream.pipe(readable);
 
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
index a9f31f1b765d5..1ca44135a4b8c 100644
--- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
@@ -100,6 +100,7 @@ function createResponseFromOptions(options: void | Options) {
 function startReadingFromUniversalStream(
   response: FlightResponse,
   stream: ReadableStream,
+  onDone: () => void,
 ): void {
   // This is the same as startReadingFromStream except this allows WebSocketStreams which
   // return ArrayBuffer and string chunks instead of Uint8Array chunks. We could potentially
@@ -115,8 +116,7 @@ function startReadingFromUniversalStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      close(response);
-      return;
+      return onDone();
     }
     if (value instanceof ArrayBuffer) {
       // WebSockets can produce ArrayBuffer values in ReadableStreams.
@@ -138,7 +138,7 @@ function startReadingFromUniversalStream(
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -151,11 +151,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -178,10 +174,20 @@ function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromUniversalStream(response, options.debugChannel.readable);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromUniversalStream(
+      response,
+      options.debugChannel.readable,
+      handleDone,
+    );
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
   return getRoot(response);
 }
@@ -199,13 +205,24 @@ function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
         startReadingFromUniversalStream(
           response,
           options.debugChannel.readable,
+          handleDone,
         );
-        startReadingFromStream(response, (r.body: any), true);
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
index 05144cfb76195..4c7e99d2149bc 100644
--- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
@@ -106,7 +106,7 @@ function createResponseFromOptions(options: Options) {
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
-  isSecondaryStream: boolean,
+  onDone: () => void,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -119,12 +119,7 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      // If we're the secondary stream, then we don't close the response until
-      // the debug channel closes.
-      if (!isSecondaryStream) {
-        close(response);
-      }
-      return;
+      return onDone();
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, streamState, buffer);
@@ -148,10 +143,16 @@ function createFromReadableStream<T>(
     options.debugChannel &&
     options.debugChannel.readable
   ) {
-    startReadingFromStream(response, options.debugChannel.readable, false);
-    startReadingFromStream(response, stream, true);
+    let streamDoneCount = 0;
+    const handleDone = () => {
+      if (++streamDoneCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel.readable, handleDone);
+    startReadingFromStream(response, stream, handleDone);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);
@@ -170,10 +171,24 @@ function createFromFetch<T>(
         options.debugChannel &&
         options.debugChannel.readable
       ) {
-        startReadingFromStream(response, options.debugChannel.readable, false);
-        startReadingFromStream(response, (r.body: any), true);
+        let streamDoneCount = 0;
+        const handleDone = () => {
+          if (++streamDoneCount === 2) {
+            close(response);
+          }
+        };
+        startReadingFromStream(
+          response,
+          options.debugChannel.readable,
+          handleDone,
+        );
+        startReadingFromStream(response, (r.body: any), handleDone);
       } else {
-        startReadingFromStream(response, (r.body: any), false);
+        startReadingFromStream(
+          response,
+          (r.body: any),
+          close.bind(null, response),
+        );
       }
     },
     function (e) {
diff --git a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
index f464f06499fa0..97e9be1bcddf6 100644
--- a/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
@@ -66,7 +66,7 @@ export type Options = {
 function startReadingFromStream(
   response: Response,
   stream: Readable,
-  isSecondaryStream: boolean,
+  onEnd: () => void,
 ): void {
   const streamState = createStreamState();
 
@@ -82,13 +82,7 @@ function startReadingFromStream(
     reportGlobalError(response, error);
   });
 
-  stream.on('end', () => {
-    // If we're the secondary stream, then we don't close the response until the
-    // debug channel closes.
-    if (!isSecondaryStream) {
-      close(response);
-    }
-  });
+  stream.on('end', onEnd);
 }
 
 function createFromNodeStream<T>(
@@ -114,10 +108,16 @@ function createFromNodeStream<T>(
   );
 
   if (__DEV__ && options && options.debugChannel) {
-    startReadingFromStream(response, options.debugChannel, false);
-    startReadingFromStream(response, stream, true);
+    let streamEndedCount = 0;
+    const handleEnd = () => {
+      if (++streamEndedCount === 2) {
+        close(response);
+      }
+    };
+    startReadingFromStream(response, options.debugChannel, handleEnd);
+    startReadingFromStream(response, stream, handleEnd);
   } else {
-    startReadingFromStream(response, stream, false);
+    startReadingFromStream(response, stream, close.bind(null, response));
   }
 
   return getRoot(response);