[Fizz] Add "Queued" Status to SSR:ed Suspense Boundaries (facebook#33087)

Stacked on facebook#33076.

This fixes a bug where we used the "complete" status but the
DOMContentLoaded event. This checks for not "loading" instead.

We also add a new status where the boundary has been marked as complete
by the server but has not yet flushed either due to being throttled,
suspended on CSS or animating.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -238,14 +238,15 @@ const ACTIVITY_END_DATA = '/&';
 const SUSPENSE_START_DATA = '$';
 const SUSPENSE_END_DATA = '/$';
 const SUSPENSE_PENDING_START_DATA = '$?';
+const SUSPENSE_QUEUED_START_DATA = '$~';
 const SUSPENSE_FALLBACK_START_DATA = '$!';
 const PREAMBLE_CONTRIBUTION_HTML = 'html';
 const PREAMBLE_CONTRIBUTION_BODY = 'body';
 const PREAMBLE_CONTRIBUTION_HEAD = 'head';
 const FORM_STATE_IS_MATCHING = 'F!';
 const FORM_STATE_IS_NOT_MATCHING = 'F';
 
-const DOCUMENT_READY_STATE_COMPLETE = 'complete';
+const DOCUMENT_READY_STATE_LOADING = 'loading';
 
 const STYLE = 'style';
 
@@ -1084,6 +1085,7 @@ function clearHydrationBoundary(
       } else if (
         data === SUSPENSE_START_DATA ||
         data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
         data === SUSPENSE_FALLBACK_START_DATA ||
         data === ACTIVITY_START_DATA
       ) {
@@ -1205,6 +1207,7 @@ function hideOrUnhideDehydratedBoundary(
       } else if (
         data === SUSPENSE_START_DATA ||
         data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
         data === SUSPENSE_FALLBACK_START_DATA
       ) {
         depth++;
@@ -3140,7 +3143,10 @@ export function canHydrateSuspenseInstance(
 }
 
 export function isSuspenseInstancePending(instance: SuspenseInstance): boolean {
-  return instance.data === SUSPENSE_PENDING_START_DATA;
+  return (
+    instance.data === SUSPENSE_PENDING_START_DATA ||
+    instance.data === SUSPENSE_QUEUED_START_DATA
+  );
 }
 
 export function isSuspenseInstanceFallback(
@@ -3149,7 +3155,7 @@ export function isSuspenseInstanceFallback(
   return (
     instance.data === SUSPENSE_FALLBACK_START_DATA ||
     (instance.data === SUSPENSE_PENDING_START_DATA &&
-      instance.ownerDocument.readyState === DOCUMENT_READY_STATE_COMPLETE)
+      instance.ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING)
   );
 }
 
@@ -3192,15 +3198,19 @@ export function registerSuspenseInstanceRetry(
   callback: () => void,
 ) {
   const ownerDocument = instance.ownerDocument;
-  if (
+  if (instance.data === SUSPENSE_QUEUED_START_DATA) {
+    // The Fizz runtime has already queued this boundary for reveal. We wait for it
+    // to be revealed and then retries.
+    instance._reactRetry = callback;
+  } else if (
     // The Fizz runtime must have put this boundary into client render or complete
     // state after the render finished but before it committed. We need to call the
     // callback now rather than wait
     instance.data !== SUSPENSE_PENDING_START_DATA ||
     // The boundary is still in pending status but the document has finished loading
     // before we could register the event handler that would have scheduled the retry
     // on load so we call teh callback now.
-    ownerDocument.readyState === DOCUMENT_READY_STATE_COMPLETE
+    ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING
   ) {
     callback();
   } else {
@@ -3255,18 +3265,19 @@ function getNextHydratable(node: ?Node) {
       break;
     }
     if (nodeType === COMMENT_NODE) {
-      const nodeData = (node: any).data;
+      const data = (node: any).data;
       if (
-        nodeData === SUSPENSE_START_DATA ||
-        nodeData === SUSPENSE_FALLBACK_START_DATA ||
-        nodeData === SUSPENSE_PENDING_START_DATA ||
-        nodeData === ACTIVITY_START_DATA ||
-        nodeData === FORM_STATE_IS_MATCHING ||
-        nodeData === FORM_STATE_IS_NOT_MATCHING
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
+        data === ACTIVITY_START_DATA ||
+        data === FORM_STATE_IS_MATCHING ||
+        data === FORM_STATE_IS_NOT_MATCHING
       ) {
         break;
       }
-      if (nodeData === SUSPENSE_END_DATA || nodeData === ACTIVITY_END_DATA) {
+      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
         return null;
       }
     }
@@ -3494,6 +3505,7 @@ function getNextHydratableInstanceAfterHydrationBoundary(
         data === SUSPENSE_START_DATA ||
         data === SUSPENSE_FALLBACK_START_DATA ||
         data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
         data === ACTIVITY_START_DATA
       ) {
         depth++;
@@ -3535,6 +3547,7 @@ export function getParentHydrationBoundary(
         data === SUSPENSE_START_DATA ||
         data === SUSPENSE_FALLBACK_START_DATA ||
         data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_QUEUED_START_DATA ||
         data === ACTIVITY_START_DATA
       ) {
         if (depth === 0) {

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

@@ -9,6 +9,7 @@ const ACTIVITY_END_DATA = '/&';
 const SUSPENSE_START_DATA = '$';
 const SUSPENSE_END_DATA = '/$';
 const SUSPENSE_PENDING_START_DATA = '$?';
+const SUSPENSE_QUEUED_START_DATA = '$~';
 const SUSPENSE_FALLBACK_START_DATA = '$!';
 
 // TODO: Symbols that are referenced outside this module use dynamic accessor
@@ -106,6 +107,7 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
           } else if (
             data === SUSPENSE_START_DATA ||
             data === SUSPENSE_PENDING_START_DATA ||
+            data === SUSPENSE_QUEUED_START_DATA ||
             data === SUSPENSE_FALLBACK_START_DATA ||
             data === ACTIVITY_START_DATA
           ) {
@@ -132,6 +134,10 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
     }
   }
 
+  // Mark this Suspense boundary as queued so we know not to client render it
+  // at the end of document load.
+  const suspenseNodeOuter = suspenseIdNodeOuter.previousSibling;
+  suspenseNodeOuter.data = SUSPENSE_QUEUED_START_DATA;
   // Queue this boundary for the next batch
   window['$RB'].push(suspenseIdNodeOuter, contentNodeOuter);
 
@@ -261,6 +267,14 @@ export function completeBoundaryWithStyles(
     }
   }
 
+  const suspenseIdNodeOuter = document.getElementById(suspenseBoundaryID);
+  if (suspenseIdNodeOuter) {
+    // Mark this Suspense boundary as queued so we know not to client render it
+    // at the end of document load.
+    const suspenseNodeOuter = suspenseIdNodeOuter.previousSibling;
+    suspenseNodeOuter.data = SUSPENSE_QUEUED_START_DATA;
+  }
+
   Promise.all(dependencies).then(
     window['$RC'].bind(null, suspenseBoundaryID, contentID),
     window['$RX'].bind(null, suspenseBoundaryID, 'CSS failed to load'),