Skip past nodes within the Suspense boundary

This lets us continue hydrating sibling nodes.

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -86,7 +86,8 @@ if (__DEV__) {
   SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
 }
 
-const SUSPENSE_DATA = '$';
+const SUSPENSE_START_DATA = '$';
+const SUSPENSE_END_DATA = '/$';
 
 const STYLE = 'style';
 
@@ -518,7 +519,7 @@ export function getNextHydratableSibling(
     node &&
     node.nodeType !== ELEMENT_NODE &&
     node.nodeType !== TEXT_NODE &&
-    (node.nodeType !== COMMENT_NODE || (node: any).data !== SUSPENSE_DATA)
+    (node.nodeType !== COMMENT_NODE || (node: any).data !== SUSPENSE_START_DATA)
   ) {
     node = node.nextSibling;
   }
@@ -534,7 +535,7 @@ export function getFirstHydratableChild(
     next &&
     next.nodeType !== ELEMENT_NODE &&
     next.nodeType !== TEXT_NODE &&
-    (next.nodeType !== COMMENT_NODE || (next: any).data !== SUSPENSE_DATA)
+    (next.nodeType !== COMMENT_NODE || (next: any).data !== SUSPENSE_START_DATA)
   ) {
     next = next.nextSibling;
   }
@@ -578,6 +579,33 @@ export function hydrateTextInstance(
   return diffHydratedText(textInstance, text);
 }
 
+export function getNextHydratableInstanceAfterSuspenseInstance(
+  suspenseInstance: SuspenseInstance,
+): null | HydratableInstance {
+  let node = suspenseInstance.nextSibling;
+  // Skip past all nodes within this suspense boundary.
+  // There might be nested nodes so we need to keep track of how
+  // deep we are and only break out when we're back on top.
+  let depth = 0;
+  while (node) {
+    if (node.nodeType === COMMENT_NODE) {
+      let data = ((node: any).data: string);
+      if (data === SUSPENSE_END_DATA) {
+        if (depth === 0) {
+          return getNextHydratableSibling((node: any));
+        } else {
+          depth--;
+        }
+      } else if (data === SUSPENSE_START_DATA) {
+        depth++;
+      }
+    }
+    node = node.nextSibling;
+  }
+  // TODO: Warn, we didn't find the end comment boundary.
+  return null;
+}
+
 export function didNotMatchHydratedContainerTextInstance(
   parentContainer: Container,
   textInstance: TextInstance,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -81,6 +81,7 @@ import {popProvider} from './ReactFiberNewContext';
 import {
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
+  skipPastDehydratedSuspenseInstance,
   popHydrationState,
 } from './ReactFiberHydrationContext';
 
@@ -771,6 +772,7 @@ function completeWork(
           'A dehydrated suspense component was completed without a hydrated node. ' +
             'This is probably a bug in React.',
         );
+        skipPastDehydratedSuspenseInstance(workInProgress);
       }
       break;
     }

packages/react-reconciler/src/ReactFiberHydrationContext.js

@@ -38,6 +38,7 @@ import {
   getFirstHydratableChild,
   hydrateInstance,
   hydrateTextInstance,
+  getNextHydratableInstanceAfterSuspenseInstance,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
   didNotHydrateContainerInstance,
@@ -326,6 +327,25 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   return shouldUpdate;
 }
 
+function skipPastDehydratedSuspenseInstance(fiber: Fiber): void {
+  if (!supportsHydration) {
+    invariant(
+      false,
+      'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+  let suspenseInstance = fiber.stateNode;
+  invariant(
+    suspenseInstance,
+    'Expected to have a hydrated suspense instance. ' +
+      'This error is likely caused by a bug in React. Please file an issue.',
+  );
+  nextHydratableInstance = getNextHydratableInstanceAfterSuspenseInstance(
+    suspenseInstance,
+  );
+}
+
 function popToNextHostParent(fiber: Fiber): void {
   let parent = fiber.return;
   while (
@@ -400,5 +420,6 @@ export {
   tryToClaimNextHydratableInstance,
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
+  skipPastDehydratedSuspenseInstance,
   popHydrationState,
 };

packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js

@@ -110,6 +110,8 @@ export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
 export const getFirstHydratableChild = $$$hostConfig.getFirstHydratableChild;
 export const hydrateInstance = $$$hostConfig.hydrateInstance;
 export const hydrateTextInstance = $$$hostConfig.hydrateTextInstance;
+export const getNextHydratableInstanceAfterSuspenseInstance =
+  $$$hostConfig.getNextHydratableInstanceAfterSuspenseInstance;
 export const didNotMatchHydratedContainerTextInstance =
   $$$hostConfig.didNotMatchHydratedContainerTextInstance;
 export const didNotMatchHydratedTextInstance =

packages/shared/HostConfigWithNoHydration.js

@@ -30,6 +30,7 @@ export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
 export const hydrateInstance = shim;
 export const hydrateTextInstance = shim;
+export const getNextHydratableInstanceAfterSuspenseInstance = shim;
 export const didNotMatchHydratedContainerTextInstance = shim;
 export const didNotMatchHydratedTextInstance = shim;
 export const didNotHydrateContainerInstance = shim;