diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index dd4e3ba16f..dab5c4b86a 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-d12bdcda69afd219f4d91cbd60d6fae2a375d35b
+768f965de2d4c6be7f688562ef02382478c82e5b
diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
index 87f93656e4..ca9b2560ef 100644
--- a/compiled/facebook-www/React-dev.modern.js
+++ b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-770d70a2";
+var ReactVersion = "18.3.0-www-modern-4cb7601b";
 
 // ATTENTION
 // When adding new symbols to this file,
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
index 454bf8e96b..7151c992cc 100644
--- a/compiled/facebook-www/ReactART-dev.classic.js
+++ b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-dfeb256e";
+var ReactVersion = "18.3.0-www-classic-e4add0e3";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -543,11 +543,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -587,8 +588,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -624,7 +625,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -2934,9 +2935,6 @@ function unhideTextInstance(textInstance, text) {
 function getInstanceFromNode(node) {
   throw new Error("Not implemented.");
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
@@ -5590,13 +5588,6 @@ function trackUsedThenable(thenableState, thenable, index) {
     }
   }
 }
-function suspendCommit() {
-  // This extra indirection only exists so it can handle passing
-  // noopSuspenseyCommitThenable through to throwException.
-  // TODO: Factor the thenable check out of throwException
-  suspendedThenable = noopSuspenseyCommitThenable;
-  throw SuspenseyCommitException;
-} // This is used to track the actual thenable that suspended so it can be
 // passed to the rest of the Suspense implementation — which, for historical
 // reasons, expects to receive a thenable.
 
@@ -17697,7 +17688,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -17708,28 +17703,16 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
-
-  if (!includesOnlyNonUrgentLanes(renderLanes));
-  else {
-    // Preload the instance
-    var isReady = preloadInstance();
-
-    if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
-        suspendCommit();
-      }
-    }
-  }
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
 }
 
 function scheduleRetryEffect(workInProgress, retryQueue) {
@@ -18160,12 +18143,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -18201,7 +18182,7 @@ function completeWork(current, workInProgress, renderLanes) {
         } else {
           getRootHostContainer();
 
-          var _instance3 = createInstance(_type, newProps);
+          var _instance3 = createInstance(_type2, newProps);
 
           appendAllChildren(_instance3, workInProgress);
           workInProgress.stateNode = _instance3; // Certain renderers require commit-time effects for initial mount.
@@ -18218,17 +18199,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -22603,13 +22574,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -22624,7 +22606,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource();
         }
@@ -22640,8 +22622,36 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     }
 
     case HostRoot:
-    case HostPortal:
-    // eslint-disable-next-line-no-fallthrough
+    case HostPortal: {
+      {
+        recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
+    }
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -24707,15 +24717,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
index 93fef4b092..0b4dafb5d2 100644
--- a/compiled/facebook-www/ReactART-dev.modern.js
+++ b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-fc6afcc9";
+var ReactVersion = "18.3.0-www-modern-7a6ee7b0";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -543,11 +543,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -587,8 +588,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -624,7 +625,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -2931,9 +2932,6 @@ function unhideTextInstance(textInstance, text) {
 function getInstanceFromNode(node) {
   throw new Error("Not implemented.");
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
@@ -5346,13 +5344,6 @@ function trackUsedThenable(thenableState, thenable, index) {
     }
   }
 }
-function suspendCommit() {
-  // This extra indirection only exists so it can handle passing
-  // noopSuspenseyCommitThenable through to throwException.
-  // TODO: Factor the thenable check out of throwException
-  suspendedThenable = noopSuspenseyCommitThenable;
-  throw SuspenseyCommitException;
-} // This is used to track the actual thenable that suspended so it can be
 // passed to the rest of the Suspense implementation — which, for historical
 // reasons, expects to receive a thenable.
 
@@ -17386,7 +17377,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -17397,28 +17392,16 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
-
-  if (!includesOnlyNonUrgentLanes(renderLanes));
-  else {
-    // Preload the instance
-    var isReady = preloadInstance();
-
-    if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
-        suspendCommit();
-      }
-    }
-  }
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
 }
 
 function scheduleRetryEffect(workInProgress, retryQueue) {
@@ -17842,12 +17825,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -17883,7 +17864,7 @@ function completeWork(current, workInProgress, renderLanes) {
         } else {
           getRootHostContainer();
 
-          var _instance3 = createInstance(_type, newProps);
+          var _instance3 = createInstance(_type2, newProps);
 
           appendAllChildren(_instance3, workInProgress);
           workInProgress.stateNode = _instance3; // Certain renderers require commit-time effects for initial mount.
@@ -17900,17 +17881,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -22263,13 +22234,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -22284,7 +22266,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource();
         }
@@ -22300,8 +22282,36 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     }
 
     case HostRoot:
-    case HostPortal:
-    // eslint-disable-next-line-no-fallthrough
+    case HostPortal: {
+      {
+        recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
+    }
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -24367,15 +24377,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
index a47cddef08..9430a028d5 100644
--- a/compiled/facebook-www/ReactART-prod.classic.js
+++ b/compiled/facebook-www/ReactART-prod.classic.js
@@ -7473,8 +7473,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -7483,12 +7484,27 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      if (fiber.flags & 16777216 && null !== fiber.memoizedState)
+      if (fiber.flags & suspenseyCommitFlag && null !== fiber.memoizedState)
         throw Error(formatProdErrorMessage(442));
       break;
     case 5:
       recursivelyAccumulateSuspenseyCommit(fiber);
       break;
+    case 3:
+    case 4:
+      recursivelyAccumulateSuspenseyCommit(fiber);
+      break;
+    case 22:
+      if (null === fiber.memoizedState) {
+        var current = fiber.alternate;
+        null !== current && null !== current.memoizedState
+          ? ((current = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = current))
+          : recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -8302,11 +8318,12 @@ function handleThrow(root, thrownValue) {
         ? (root = null === shellBoundary ? !0 : !1)
         : ((root = suspenseHandlerStackCursor.current),
           (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
+            null === root ||
+            ((workInProgressRootRenderLanes & 125829120) !==
+              workInProgressRootRenderLanes &&
+              0 === (workInProgressRootRenderLanes & 1073741824))
+              ? !1
+              : root === shellBoundary)),
       (workInProgressSuspendedReason =
         root &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
@@ -10016,19 +10033,19 @@ var slice = Array.prototype.slice,
     };
     return Text;
   })(React.Component),
-  devToolsConfig$jscomp$inline_1141 = {
+  devToolsConfig$jscomp$inline_1146 = {
     findFiberByHostInstance: function () {
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-2dcecc61",
+    version: "18.3.0-www-classic-9b739764",
     rendererPackageName: "react-art"
   };
-var internals$jscomp$inline_1319 = {
-  bundleType: devToolsConfig$jscomp$inline_1141.bundleType,
-  version: devToolsConfig$jscomp$inline_1141.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1141.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1141.rendererConfig,
+var internals$jscomp$inline_1324 = {
+  bundleType: devToolsConfig$jscomp$inline_1146.bundleType,
+  version: devToolsConfig$jscomp$inline_1146.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1146.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1146.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -10045,26 +10062,26 @@ var internals$jscomp$inline_1319 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1141.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1146.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-2dcecc61"
+  reconcilerVersion: "18.3.0-www-classic-9b739764"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1320 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1325 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1320.isDisabled &&
-    hook$jscomp$inline_1320.supportsFiber
+    !hook$jscomp$inline_1325.isDisabled &&
+    hook$jscomp$inline_1325.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1320.inject(
-        internals$jscomp$inline_1319
+      (rendererID = hook$jscomp$inline_1325.inject(
+        internals$jscomp$inline_1324
       )),
-        (injectedHook = hook$jscomp$inline_1320);
+        (injectedHook = hook$jscomp$inline_1325);
     } catch (err) {}
 }
 var Path = Mode$1.Path;
diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
index 3340a4b2d7..a977e13094 100644
--- a/compiled/facebook-www/ReactART-prod.modern.js
+++ b/compiled/facebook-www/ReactART-prod.modern.js
@@ -7205,8 +7205,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -7215,12 +7216,27 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      if (fiber.flags & 16777216 && null !== fiber.memoizedState)
+      if (fiber.flags & suspenseyCommitFlag && null !== fiber.memoizedState)
         throw Error(formatProdErrorMessage(442));
       break;
     case 5:
       recursivelyAccumulateSuspenseyCommit(fiber);
       break;
+    case 3:
+    case 4:
+      recursivelyAccumulateSuspenseyCommit(fiber);
+      break;
+    case 22:
+      if (null === fiber.memoizedState) {
+        var current = fiber.alternate;
+        null !== current && null !== current.memoizedState
+          ? ((current = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = current))
+          : recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -8034,11 +8050,12 @@ function handleThrow(root, thrownValue) {
         ? (root = null === shellBoundary ? !0 : !1)
         : ((root = suspenseHandlerStackCursor.current),
           (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
+            null === root ||
+            ((workInProgressRootRenderLanes & 125829120) !==
+              workInProgressRootRenderLanes &&
+              0 === (workInProgressRootRenderLanes & 1073741824))
+              ? !1
+              : root === shellBoundary)),
       (workInProgressSuspendedReason =
         root &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
@@ -9681,19 +9698,19 @@ var slice = Array.prototype.slice,
     };
     return Text;
   })(React.Component),
-  devToolsConfig$jscomp$inline_1121 = {
+  devToolsConfig$jscomp$inline_1126 = {
     findFiberByHostInstance: function () {
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-ef21bdef",
+    version: "18.3.0-www-modern-68e129ab",
     rendererPackageName: "react-art"
   };
-var internals$jscomp$inline_1299 = {
-  bundleType: devToolsConfig$jscomp$inline_1121.bundleType,
-  version: devToolsConfig$jscomp$inline_1121.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1121.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1121.rendererConfig,
+var internals$jscomp$inline_1304 = {
+  bundleType: devToolsConfig$jscomp$inline_1126.bundleType,
+  version: devToolsConfig$jscomp$inline_1126.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1126.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1126.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -9710,26 +9727,26 @@ var internals$jscomp$inline_1299 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1121.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1126.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-ef21bdef"
+  reconcilerVersion: "18.3.0-www-modern-68e129ab"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1300 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1305 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1300.isDisabled &&
-    hook$jscomp$inline_1300.supportsFiber
+    !hook$jscomp$inline_1305.isDisabled &&
+    hook$jscomp$inline_1305.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1300.inject(
-        internals$jscomp$inline_1299
+      (rendererID = hook$jscomp$inline_1305.inject(
+        internals$jscomp$inline_1304
       )),
-        (injectedHook = hook$jscomp$inline_1300);
+        (injectedHook = hook$jscomp$inline_1305);
     } catch (err) {}
 }
 var Path = Mode$1.Path;
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
index e9ca774f5f..3246850bf9 100644
--- a/compiled/facebook-www/ReactDOM-dev.classic.js
+++ b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -513,11 +513,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -557,8 +558,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -594,7 +595,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -11464,6 +11465,7 @@ function preinit$1(href, options) {
           link.addEventListener("error", function () {
             state.loading |= Errored;
           });
+          state.loading |= Inserted;
           insertStylesheet(_instance, precedence, resourceRoot);
         } // Construct a Resource and cache it
 
@@ -11795,7 +11797,11 @@ function acquireResource(hoistableRoot, resource, props) {
         var ownerDocument = getDocumentFromRoot(hoistableRoot);
         instance = ownerDocument.createElement("style");
         markNodeAsHoistable(instance);
-        setInitialProperties(instance, "style", styleProps);
+        setInitialProperties(instance, "style", styleProps); // TODO: `style` does not have loading state for tracking insertions. I
+        // guess because these aren't suspensey? Not sure whether this is a
+        // factoring smell.
+        // resource.state.loading |= Inserted;
+
         insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
         resource.instance = instance;
         return instance;
@@ -11836,6 +11842,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(_instance3, "link", stylesheetProps);
+        resource.state.loading |= Inserted;
         insertStylesheet(_instance3, _qualifiedProps.precedence, hoistableRoot);
         resource.instance = _instance3;
         return _instance3;
@@ -11892,6 +11899,28 @@ function acquireResource(hoistableRoot, resource, props) {
         );
       }
     }
+  } else {
+    // In the case of stylesheets, they might have already been assigned an
+    // instance during `suspendResource`. But that doesn't mean they were
+    // inserted, because the commit might have been interrupted. So we need to
+    // check now.
+    //
+    // The other resource types are unaffected because they are not
+    // yet suspensey.
+    //
+    // TODO: This is a bit of a code smell. Consider refactoring how
+    // `suspendResource` and `acquireResource` work together. The idea is that
+    // `suspendResource` does all the same stuff as `acquireResource` except
+    // for the insertion.
+    if (
+      resource.type === "stylesheet" &&
+      (resource.state.loading & Inserted) === NotLoaded
+    ) {
+      var _qualifiedProps2 = props;
+      var _instance5 = resource.instance;
+      resource.state.loading |= Inserted;
+      insertStylesheet(_instance5, _qualifiedProps2.precedence, hoistableRoot);
+    }
   }
 
   return resource.instance;
@@ -12339,9 +12368,6 @@ function isHostHoistableType(type, props, hostContext) {
 
   return false;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function mayResourceSuspendCommit(resource) {
   return (
     resource.type === "stylesheet" &&
@@ -12352,6 +12378,17 @@ function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
 }
+function preloadResource(resource) {
+  if (
+    resource.type === "stylesheet" &&
+    (resource.state.loading & Settled) === NotLoaded
+  ) {
+    // we have not finished loading the underlying stylesheet yet.
+    return false;
+  } // Return true to indicate it's already loaded
+
+  return true;
+}
 var suspendedState = null; // We use a noop function when we begin suspending because if possible we want the
 // waitfor step to finish synchronously. If it doesn't we'll return a function to
 // provide the actual unsuspend function and that will get completed when the count
@@ -28454,7 +28491,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -28465,24 +28506,42 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
+}
 
-  if (!includesOnlyNonUrgentLanes(renderLanes));
+function preloadResourceAndSuspendIfNeeded(
+  workInProgress,
+  resource,
+  type,
+  props,
+  renderLanes
+) {
+  // This is a fork of preloadInstanceAndSuspendIfNeeded, but for resources.
+  if (!mayResourceSuspendCommit(resource)) {
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  workInProgress.flags |= MaySuspendCommit;
+  var rootRenderLanes = getWorkInProgressRootRenderLanes();
+
+  if (!includesOnlyNonUrgentLanes(rootRenderLanes));
   else {
-    // Preload the instance
-    var isReady = preloadInstance();
+    var isReady = preloadResource(resource);
 
     if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
+      if (shouldRemainOnPreviousScreen()) {
+        workInProgress.flags |= ShouldSuspendCommit;
+      } else {
         suspendCommit();
       }
     }
@@ -28937,58 +28996,74 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostHoistable: {
       {
-        var currentRef = current ? current.ref : null;
+        // The branching here is more complicated than you might expect because
+        // a HostHoistable sometimes corresponds to a Resource and sometimes
+        // corresponds to an Instance. It can also switch during an update.
+        var type = workInProgress.type;
+        var nextResource = workInProgress.memoizedState;
 
-        if (currentRef !== workInProgress.ref) {
-          markRef(workInProgress);
-        }
-
-        var maySuspend = false; // @TODO refactor this block to create the instance here in complete phase if we
-        // are not hydrating.
-
-        if (
+        if (current === null) {
           // We are mounting and must Update this Hoistable in this commit
-          current === null || // We are transitioning to, from, or between Hoistable Resources
-          // and require an update
-          current.memoizedState !== workInProgress.memoizedState
-        ) {
-          if (workInProgress.memoizedState !== null) {
-            maySuspend = mayResourceSuspendCommit(workInProgress.memoizedState);
-          } else {
-            maySuspend = maySuspendCommit();
+          // @TODO refactor this block to create the instance here in complete
+          // phase if we are not hydrating.
+          markUpdate(workInProgress);
+
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
           }
 
-          markUpdate(workInProgress);
-        } else if (workInProgress.memoizedState === null) {
-          maySuspend = maySuspendCommit(); // We may have props to update on the Hoistable instance. We use the
-          // updateHostComponent path becuase it produces the update queue
-          // we need for Hoistables
-
-          updateHostComponent(
-            current,
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps
-          );
-        }
-
-        bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might
-        // throw to suspend, and if the resource immediately loads, the work loop
-        // will resume rendering as if the work-in-progress completed. So it must
-        // fully complete.
-
-        if (maySuspend) {
-          preloadInstanceAndSuspendIfNeeded(
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps,
-            renderLanes
-          );
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
         } else {
-          workInProgress.flags &= ~SuspenseyCommit;
-        }
+          // We are updating.
+          var currentResource = current.memoizedState;
 
-        return null;
+          if (nextResource !== currentResource) {
+            // We are transitioning to, from, or between Hoistable Resources
+            // and require an update
+            markUpdate(workInProgress);
+          }
+
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
+
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+
+            if (nextResource === currentResource) {
+              workInProgress.flags &= ~MaySuspendCommit;
+            } else {
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            }
+
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            //
+            // We may have props to update on the Hoistable instance. We use the
+            // updateHostComponent path becuase it produces the update queue
+            // we need for Hoistables.
+            updateHostComponent(current, workInProgress, type, newProps); // This must come at the very end of the complete phase.
+
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
+        }
       }
     }
     // eslint-disable-next-line-no-fallthrough
@@ -28997,10 +29072,10 @@ function completeWork(current, workInProgress, renderLanes) {
       {
         popHostContext(workInProgress);
         var rootContainerInstance = getRootHostContainer();
-        var type = workInProgress.type;
+        var _type = workInProgress.type;
 
         if (current !== null && workInProgress.stateNode != null) {
-          updateHostComponent(current, workInProgress, type, newProps);
+          updateHostComponent(current, workInProgress, _type, newProps);
 
           if (current.ref !== workInProgress.ref) {
             markRef(workInProgress);
@@ -29032,7 +29107,7 @@ function completeWork(current, workInProgress, renderLanes) {
             instance = workInProgress.stateNode;
           } else {
             instance = resolveSingletonInstance(
-              type,
+              _type,
               newProps,
               rootContainerInstance,
               currentHostContext,
@@ -29056,12 +29131,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -29100,7 +29173,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -29112,7 +29185,7 @@ function completeWork(current, workInProgress, renderLanes) {
           // (eg DOM renderer supports auto-focus for certain elements).
           // Make sure such renderers get scheduled for later work.
 
-          if (finalizeInitialChildren(_instance3, _type, newProps)) {
+          if (finalizeInitialChildren(_instance3, _type2, newProps)) {
             markUpdate(workInProgress);
           }
         }
@@ -29128,17 +29201,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -33878,13 +33941,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -33899,7 +33973,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource(
             // This should always be set by visiting HostRoot first
@@ -33927,10 +34001,33 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
         currentHoistableRoot = getHoistableRoot(container);
         recursivelyAccumulateSuspenseyCommit(fiber);
         currentHoistableRoot = previousHoistableRoot;
-        break;
       }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
     }
-    // eslint-disable-next-line-no-fallthrough
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -36098,15 +36195,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -39564,7 +39670,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-30e8fd15";
+var ReactVersion = "18.3.0-www-classic-f9e1fdbb";
 
 function createPortal$1(
   children,
diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
index 0fe351f3ab..d92efb1456 100644
--- a/compiled/facebook-www/ReactDOM-dev.modern.js
+++ b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -330,11 +330,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -374,8 +375,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -411,7 +412,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 // This module only exists as an ESM wrapper around the external CommonJS
 var scheduleCallback$2 = Scheduler.unstable_scheduleCallback;
@@ -22558,7 +22559,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -22569,24 +22574,42 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
+}
 
-  if (!includesOnlyNonUrgentLanes(renderLanes));
+function preloadResourceAndSuspendIfNeeded(
+  workInProgress,
+  resource,
+  type,
+  props,
+  renderLanes
+) {
+  // This is a fork of preloadInstanceAndSuspendIfNeeded, but for resources.
+  if (!mayResourceSuspendCommit(resource)) {
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  workInProgress.flags |= MaySuspendCommit;
+  var rootRenderLanes = getWorkInProgressRootRenderLanes();
+
+  if (!includesOnlyNonUrgentLanes(rootRenderLanes));
   else {
-    // Preload the instance
-    var isReady = preloadInstance();
+    var isReady = preloadResource(resource);
 
     if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
+      if (shouldRemainOnPreviousScreen()) {
+        workInProgress.flags |= ShouldSuspendCommit;
+      } else {
         suspendCommit();
       }
     }
@@ -23034,58 +23057,74 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostHoistable: {
       {
-        var currentRef = current ? current.ref : null;
+        // The branching here is more complicated than you might expect because
+        // a HostHoistable sometimes corresponds to a Resource and sometimes
+        // corresponds to an Instance. It can also switch during an update.
+        var type = workInProgress.type;
+        var nextResource = workInProgress.memoizedState;
 
-        if (currentRef !== workInProgress.ref) {
-          markRef(workInProgress);
-        }
-
-        var maySuspend = false; // @TODO refactor this block to create the instance here in complete phase if we
-        // are not hydrating.
-
-        if (
+        if (current === null) {
           // We are mounting and must Update this Hoistable in this commit
-          current === null || // We are transitioning to, from, or between Hoistable Resources
-          // and require an update
-          current.memoizedState !== workInProgress.memoizedState
-        ) {
-          if (workInProgress.memoizedState !== null) {
-            maySuspend = mayResourceSuspendCommit(workInProgress.memoizedState);
-          } else {
-            maySuspend = maySuspendCommit();
+          // @TODO refactor this block to create the instance here in complete
+          // phase if we are not hydrating.
+          markUpdate(workInProgress);
+
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
           }
 
-          markUpdate(workInProgress);
-        } else if (workInProgress.memoizedState === null) {
-          maySuspend = maySuspendCommit(); // We may have props to update on the Hoistable instance. We use the
-          // updateHostComponent path becuase it produces the update queue
-          // we need for Hoistables
-
-          updateHostComponent(
-            current,
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps
-          );
-        }
-
-        bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might
-        // throw to suspend, and if the resource immediately loads, the work loop
-        // will resume rendering as if the work-in-progress completed. So it must
-        // fully complete.
-
-        if (maySuspend) {
-          preloadInstanceAndSuspendIfNeeded(
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps,
-            renderLanes
-          );
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
         } else {
-          workInProgress.flags &= ~SuspenseyCommit;
-        }
+          // We are updating.
+          var currentResource = current.memoizedState;
 
-        return null;
+          if (nextResource !== currentResource) {
+            // We are transitioning to, from, or between Hoistable Resources
+            // and require an update
+            markUpdate(workInProgress);
+          }
+
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
+
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+
+            if (nextResource === currentResource) {
+              workInProgress.flags &= ~MaySuspendCommit;
+            } else {
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            }
+
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            //
+            // We may have props to update on the Hoistable instance. We use the
+            // updateHostComponent path becuase it produces the update queue
+            // we need for Hoistables.
+            updateHostComponent(current, workInProgress, type, newProps); // This must come at the very end of the complete phase.
+
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
+        }
       }
     }
     // eslint-disable-next-line-no-fallthrough
@@ -23094,10 +23133,10 @@ function completeWork(current, workInProgress, renderLanes) {
       {
         popHostContext(workInProgress);
         var rootContainerInstance = getRootHostContainer();
-        var type = workInProgress.type;
+        var _type = workInProgress.type;
 
         if (current !== null && workInProgress.stateNode != null) {
-          updateHostComponent(current, workInProgress, type, newProps);
+          updateHostComponent(current, workInProgress, _type, newProps);
 
           if (current.ref !== workInProgress.ref) {
             markRef(workInProgress);
@@ -23129,7 +23168,7 @@ function completeWork(current, workInProgress, renderLanes) {
             instance = workInProgress.stateNode;
           } else {
             instance = resolveSingletonInstance(
-              type,
+              _type,
               newProps,
               rootContainerInstance,
               currentHostContext,
@@ -23153,12 +23192,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -23197,7 +23234,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -23209,7 +23246,7 @@ function completeWork(current, workInProgress, renderLanes) {
           // (eg DOM renderer supports auto-focus for certain elements).
           // Make sure such renderers get scheduled for later work.
 
-          if (finalizeInitialChildren(_instance3, _type, newProps)) {
+          if (finalizeInitialChildren(_instance3, _type2, newProps)) {
             markUpdate(workInProgress);
           }
         }
@@ -23225,17 +23262,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -27953,13 +27980,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -27974,7 +28012,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource(
             // This should always be set by visiting HostRoot first
@@ -28002,10 +28040,33 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
         currentHoistableRoot = getHoistableRoot(container);
         recursivelyAccumulateSuspenseyCommit(fiber);
         currentHoistableRoot = previousHoistableRoot;
-        break;
       }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
     }
-    // eslint-disable-next-line-no-fallthrough
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -30173,15 +30234,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -33639,7 +33709,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-ef21bdef";
+var ReactVersion = "18.3.0-www-modern-68e129ab";
 
 function createPortal$1(
   children,
@@ -42813,6 +42883,7 @@ function preinit$1(href, options) {
           link.addEventListener("error", function () {
             state.loading |= Errored;
           });
+          state.loading |= Inserted;
           insertStylesheet(_instance, precedence, resourceRoot);
         } // Construct a Resource and cache it
 
@@ -43144,7 +43215,11 @@ function acquireResource(hoistableRoot, resource, props) {
         var ownerDocument = getDocumentFromRoot(hoistableRoot);
         instance = ownerDocument.createElement("style");
         markNodeAsHoistable(instance);
-        setInitialProperties(instance, "style", styleProps);
+        setInitialProperties(instance, "style", styleProps); // TODO: `style` does not have loading state for tracking insertions. I
+        // guess because these aren't suspensey? Not sure whether this is a
+        // factoring smell.
+        // resource.state.loading |= Inserted;
+
         insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
         resource.instance = instance;
         return instance;
@@ -43185,6 +43260,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(_instance3, "link", stylesheetProps);
+        resource.state.loading |= Inserted;
         insertStylesheet(_instance3, _qualifiedProps.precedence, hoistableRoot);
         resource.instance = _instance3;
         return _instance3;
@@ -43241,6 +43317,28 @@ function acquireResource(hoistableRoot, resource, props) {
         );
       }
     }
+  } else {
+    // In the case of stylesheets, they might have already been assigned an
+    // instance during `suspendResource`. But that doesn't mean they were
+    // inserted, because the commit might have been interrupted. So we need to
+    // check now.
+    //
+    // The other resource types are unaffected because they are not
+    // yet suspensey.
+    //
+    // TODO: This is a bit of a code smell. Consider refactoring how
+    // `suspendResource` and `acquireResource` work together. The idea is that
+    // `suspendResource` does all the same stuff as `acquireResource` except
+    // for the insertion.
+    if (
+      resource.type === "stylesheet" &&
+      (resource.state.loading & Inserted) === NotLoaded
+    ) {
+      var _qualifiedProps2 = props;
+      var _instance5 = resource.instance;
+      resource.state.loading |= Inserted;
+      insertStylesheet(_instance5, _qualifiedProps2.precedence, hoistableRoot);
+    }
   }
 
   return resource.instance;
@@ -43688,9 +43786,6 @@ function isHostHoistableType(type, props, hostContext) {
 
   return false;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function mayResourceSuspendCommit(resource) {
   return (
     resource.type === "stylesheet" &&
@@ -43701,6 +43796,17 @@ function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
 }
+function preloadResource(resource) {
+  if (
+    resource.type === "stylesheet" &&
+    (resource.state.loading & Settled) === NotLoaded
+  ) {
+    // we have not finished loading the underlying stylesheet yet.
+    return false;
+  } // Return true to indicate it's already loaded
+
+  return true;
+}
 var suspendedState = null; // We use a noop function when we begin suspending because if possible we want the
 // waitfor step to finish synchronously. If it doesn't we'll return a function to
 // provide the actual unsuspend function and that will get completed when the count
diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
index 6c85221104..8e85221ab8 100644
--- a/compiled/facebook-www/ReactDOM-prod.classic.js
+++ b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -2352,6 +2352,7 @@ function preinit$1(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -2567,6 +2568,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(instance$33, "link", key);
+        resource.state.loading |= 4;
         insertStylesheet(instance$33, props.precedence, hoistableRoot);
         return (resource.instance = instance$33);
       case "script":
@@ -2596,6 +2598,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -4867,10 +4875,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$73 = thenableIndexCounter;
+      var index$75 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$73);
+      usable = trackUsedThenable(thenableState, usable, index$75);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -5362,16 +5370,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$79 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$79) {
+        var root$81 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$81) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$79, provider, lane, eventTime);
-          entangleTransitions(root$79, provider, lane);
+          scheduleUpdateOnFiber(root$81, provider, lane, eventTime);
+          entangleTransitions(root$81, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$79 &&
+          null !== root$81 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -5578,15 +5586,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$75 = workInProgressRoot;
-      if (null === root$75) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$75, renderLanes$1) ||
+      var root$77 = workInProgressRoot;
+      if (null === root$77) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$77, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$75 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$75;
-    mountEffect(subscribeToStore.bind(null, fiber, root$75, subscribe), [
+    root$77 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$77;
+    mountEffect(subscribeToStore.bind(null, fiber, root$77, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -5595,7 +5603,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$75,
+        root$77,
         getServerSnapshot,
         getSnapshot
       ),
@@ -6094,10 +6102,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$90 = workInProgress.stateNode;
+      root$92 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$90.incompleteTransitions.has(transition)) {
+        if (!root$92.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -6105,11 +6113,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$90.incompleteTransitions.set(transition, markerInstance);
+          root$92.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$90.incompleteTransitions.forEach(function (markerInstance) {
+    root$92.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -6809,14 +6817,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$97 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$97)
+    var dehydrated$99 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$99)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$97,
+        dehydrated$99,
         JSCompiler_temp,
         renderLanes
       );
@@ -6826,7 +6834,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$97 = JSCompiler_temp.sibling;
+    dehydrated$99 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -6835,8 +6843,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$97
-      ? (showFallback = createWorkInProgress(dehydrated$97, showFallback))
+    null !== dehydrated$99
+      ? (showFallback = createWorkInProgress(dehydrated$99, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -6855,10 +6863,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$97 = CacheContext._currentValue),
+          ? ((dehydrated$99 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$97
-                ? { parent: dehydrated$97, pool: dehydrated$97 }
+              JSCompiler_temp.parent !== dehydrated$99
+                ? { parent: dehydrated$99, pool: dehydrated$99 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -6872,23 +6880,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$97 = showFallback.updateQueue),
+        (dehydrated$99 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$97
+        null === dehydrated$99
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$97 === primaryChildProps
+          : dehydrated$99 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$97.transitions = didSuspend),
-            (dehydrated$97.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$99.transitions = didSuspend),
+            (dehydrated$99.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -8023,6 +8031,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -8046,14 +8073,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$128 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$128 = lastTailNode),
+        for (var lastTailNode$130 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$130 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$128
+        null === lastTailNode$130
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$128.sibling = null);
+          : (lastTailNode$130.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -8063,19 +8090,19 @@ function bubbleProperties(completedWork) {
     newChildLanes = 0,
     subtreeFlags = 0;
   if (didBailout)
-    for (var child$129 = completedWork.child; null !== child$129; )
-      (newChildLanes |= child$129.lanes | child$129.childLanes),
-        (subtreeFlags |= child$129.subtreeFlags & 31457280),
-        (subtreeFlags |= child$129.flags & 31457280),
-        (child$129.return = completedWork),
-        (child$129 = child$129.sibling);
+    for (var child$131 = completedWork.child; null !== child$131; )
+      (newChildLanes |= child$131.lanes | child$131.childLanes),
+        (subtreeFlags |= child$131.subtreeFlags & 31457280),
+        (subtreeFlags |= child$131.flags & 31457280),
+        (child$131.return = completedWork),
+        (child$131 = child$131.sibling);
   else
-    for (child$129 = completedWork.child; null !== child$129; )
-      (newChildLanes |= child$129.lanes | child$129.childLanes),
-        (subtreeFlags |= child$129.subtreeFlags),
-        (subtreeFlags |= child$129.flags),
-        (child$129.return = completedWork),
-        (child$129 = child$129.sibling);
+    for (child$131 = completedWork.child; null !== child$131; )
+      (newChildLanes |= child$131.lanes | child$131.childLanes),
+        (subtreeFlags |= child$131.subtreeFlags),
+        (subtreeFlags |= child$131.flags),
+        (child$131.return = completedWork),
+        (child$131 = child$131.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -8102,13 +8129,13 @@ function completeWork(current, workInProgress, renderLanes) {
         null
       );
     case 3:
-      renderLanes = workInProgress.stateNode;
+      newProps = workInProgress.stateNode;
       enableTransitionTracing &&
         null !== workInProgressTransitions &&
         (workInProgress.flags |= 2048);
-      newProps = null;
-      null !== current && (newProps = current.memoizedState.cache);
-      workInProgress.memoizedState.cache !== newProps &&
+      renderLanes = null;
+      null !== current && (renderLanes = current.memoizedState.cache);
+      workInProgress.memoizedState.cache !== renderLanes &&
         (workInProgress.flags |= 2048);
       popProvider(CacheContext);
       enableTransitionTracing &&
@@ -8119,9 +8146,9 @@ function completeWork(current, workInProgress, renderLanes) {
       pop(didPerformWorkStackCursor);
       pop(contextStackCursor);
       resetWorkInProgressVersions();
-      renderLanes.pendingContext &&
-        ((renderLanes.context = renderLanes.pendingContext),
-        (renderLanes.pendingContext = null));
+      newProps.pendingContext &&
+        ((newProps.context = newProps.pendingContext),
+        (newProps.pendingContext = null));
       if (null === current || null === current.child)
         popHydrationState(workInProgress)
           ? markUpdate(workInProgress)
@@ -8138,39 +8165,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -8182,7 +8211,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor$1.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -8207,64 +8240,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -8297,25 +8347,25 @@ function completeWork(current, workInProgress, renderLanes) {
           throw Error(formatProdErrorMessage(166));
         current = rootInstanceStackCursor.current;
         if (popHydrationState(workInProgress)) {
-          newProps = workInProgress.stateNode;
+          renderLanes = workInProgress.stateNode;
           current = workInProgress.memoizedProps;
-          newProps[internalInstanceKey] = workInProgress;
-          if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+          renderLanes[internalInstanceKey] = workInProgress;
+          if ((newProps = renderLanes.nodeValue !== current))
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
-                  newProps = newProps.nodeValue;
+                  renderLanes = renderLanes.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
-                  normalizeMarkupForTextOrAttribute(newProps);
+                  normalizeMarkupForTextOrAttribute(renderLanes);
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
-                    ((newProps = newProps.nodeValue),
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
+                    ((renderLanes = renderLanes.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
-                    normalizeMarkupForTextOrAttribute(newProps));
+                    normalizeMarkupForTextOrAttribute(renderLanes));
               }
-          renderLanes && markUpdate(workInProgress);
+          newProps && markUpdate(workInProgress);
         } else
           (current =
             getOwnerDocumentFromRootContainer(current).createTextNode(
@@ -8343,50 +8393,51 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
                 (workInProgress.memoizedState = null),
               (workInProgress.flags |= 4);
           bubbleProperties(workInProgress);
-          type = !1;
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
-      renderLanes = null !== newProps;
+      newProps = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
-        null !== newProps.alternate &&
-          null !== newProps.alternate.memoizedState &&
-          null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$140 = null;
-        null !== newProps.memoizedState &&
-          null !== newProps.memoizedState.cachePool &&
-          (cache$140 = newProps.memoizedState.cachePool.pool);
-        cache$140 !== type && (newProps.flags |= 2048);
-      }
-      renderLanes !== current &&
+      newProps &&
+        ((renderLanes = workInProgress.child),
+        (nextResource = null),
+        null !== renderLanes.alternate &&
+          null !== renderLanes.alternate.memoizedState &&
+          null !== renderLanes.alternate.memoizedState.cachePool &&
+          (nextResource = renderLanes.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
+        null !== renderLanes.memoizedState &&
+          null !== renderLanes.memoizedState.cachePool &&
+          (currentResource = renderLanes.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (renderLanes.flags |= 2048));
+      newProps !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
-        renderLanes && (workInProgress.child.flags |= 8192));
+        newProps && (workInProgress.child.flags |= 8192));
       scheduleRetryEffect(workInProgress, workInProgress.updateQueue);
       null !== workInProgress.updateQueue &&
         null != workInProgress.memoizedProps.suspenseCallback &&
@@ -8415,30 +8466,30 @@ function completeWork(current, workInProgress, renderLanes) {
       );
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$140 = type.rendering;
-      if (null === cache$140)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$140 = findFirstSuspended(current);
-              if (null !== cache$140) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$140.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
                 current = renderLanes;
-                for (renderLanes = workInProgress.child; null !== renderLanes; )
-                  resetWorkInProgress(renderLanes, current),
-                    (renderLanes = renderLanes.sibling);
+                for (newProps = workInProgress.child; null !== newProps; )
+                  resetWorkInProgress(newProps, current),
+                    (newProps = newProps.sibling);
                 push(
                   suspenseStackCursor,
                   (suspenseStackCursor.current & 1) | 2
@@ -8447,52 +8498,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$140)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$140.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now() - type.renderingStartTime >
+            2 * now() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$140.sibling = workInProgress.child),
-            (workInProgress.child = cache$140))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$140)
-              : (workInProgress.child = cache$140),
-            (type.last = cache$140));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -8537,27 +8590,27 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.subtreeFlags & 6 &&
               (workInProgress.flags |= 8192))
           : bubbleProperties(workInProgress),
-        (renderLanes = workInProgress.updateQueue),
-        null !== renderLanes &&
-          scheduleRetryEffect(workInProgress, renderLanes.retryQueue),
-        (renderLanes = null),
+        (newProps = workInProgress.updateQueue),
+        null !== newProps &&
+          scheduleRetryEffect(workInProgress, newProps.retryQueue),
+        (newProps = null),
         null !== current &&
           null !== current.memoizedState &&
           null !== current.memoizedState.cachePool &&
-          (renderLanes = current.memoizedState.cachePool.pool),
-        (newProps = null),
+          (newProps = current.memoizedState.cachePool.pool),
+        (renderLanes = null),
         null !== workInProgress.memoizedState &&
           null !== workInProgress.memoizedState.cachePool &&
-          (newProps = workInProgress.memoizedState.cachePool.pool),
-        newProps !== renderLanes && (workInProgress.flags |= 2048),
+          (renderLanes = workInProgress.memoizedState.cachePool.pool),
+        renderLanes !== newProps && (workInProgress.flags |= 2048),
         popTransition(workInProgress, current),
         null
       );
     case 24:
       return (
-        (renderLanes = null),
-        null !== current && (renderLanes = current.memoizedState.cache),
-        workInProgress.memoizedState.cache !== renderLanes &&
+        (newProps = null),
+        null !== current && (newProps = current.memoizedState.cache),
+        workInProgress.memoizedState.cache !== newProps &&
           (workInProgress.flags |= 2048),
         popProvider(CacheContext),
         bubbleProperties(workInProgress),
@@ -8786,8 +8839,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$158) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$158);
+      } catch (error$161) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$161);
       }
     else ref.current = null;
 }
@@ -9094,11 +9147,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$160) {
+          } catch (error$163) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$160
+              error$163
             );
           }
         }
@@ -9772,8 +9825,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$173) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$173);
+        } catch (error$176) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$176);
         }
       }
       break;
@@ -9951,11 +10004,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$174) {
+          } catch (error$177) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$174
+              error$177
             );
           }
       break;
@@ -9991,8 +10044,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$175) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$175);
+        } catch (error$178) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$178);
         }
       }
       if (
@@ -10009,8 +10062,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$178) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$178);
+        } catch (error$181) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$181);
         }
       break;
     case 6:
@@ -10023,8 +10076,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$179) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$179);
+        } catch (error$182) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$182);
         }
       }
       break;
@@ -10038,8 +10091,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$180) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$180);
+        } catch (error$183) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$183);
         }
       break;
     case 4:
@@ -10069,8 +10122,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$182) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$182);
+        } catch (error$185) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$185);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -10148,11 +10201,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$163) {
+              } catch (error$166) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$163
+                  error$166
                 );
               }
           } else if (
@@ -10227,21 +10280,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$164 = JSCompiler_inline_result.stateNode;
+            var parent$167 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$164, ""),
+              (setTextContent(parent$167, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$165 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$165, parent$164);
+            var before$168 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$168, parent$167);
             break;
           case 3:
           case 4:
-            var parent$166 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$167 = getHostSibling(finishedWork);
+            var parent$169 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$170 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$167,
-              parent$166
+              before$170,
+              parent$169
             );
             break;
           default:
@@ -10711,9 +10764,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$192 = finishedWork.stateNode;
+        var instance$195 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$192._visibility & 4
+          ? instance$195._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -10726,7 +10779,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$192._visibility |= 4),
+            : ((instance$195._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -10734,7 +10787,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$192._visibility |= 4),
+          : ((instance$195._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -10747,7 +10800,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$192
+            instance$195
           );
         break;
       case 24:
@@ -10818,8 +10871,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -10828,7 +10882,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -10846,6 +10900,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -11333,16 +11398,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$201 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$204 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$201 &&
-            ((lanes = errorRetryLanes$201),
+          0 !== errorRetryLanes$204 &&
+            ((lanes = errorRetryLanes$204),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$201
+              errorRetryLanes$204
             )));
         }
         if (1 === exitStatus)
@@ -11403,14 +11468,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$201 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$204 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$201 && (errorRetryLanes$201 = index$2);
+            index$2 > errorRetryLanes$204 && (errorRetryLanes$204 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$201;
+          exitStatus = errorRetryLanes$204;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -11698,18 +11763,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -11730,6 +11785,20 @@ function handleThrow(root, thrownValue) {
     ((workInProgressRootExitStatus = 1),
     (workInProgressRootFatalError = thrownValue));
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -11777,8 +11846,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$204) {
-      handleThrow(root, thrownValue$204);
+    } catch (thrownValue$207) {
+      handleThrow(root, thrownValue$207);
     }
   while (1);
   resetContextDependencies();
@@ -11884,8 +11953,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$206) {
-      handleThrow(root, thrownValue$206);
+    } catch (thrownValue$209) {
+      handleThrow(root, thrownValue$209);
     }
   while (1);
   resetContextDependencies();
@@ -12040,10 +12109,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$85 = offscreenQueue.retryQueue;
-                      null === retryQueue$85
+                      var retryQueue$87 = offscreenQueue.retryQueue;
+                      null === retryQueue$87
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$85.add(wakeable);
+                        : retryQueue$87.add(wakeable);
                     }
                   }
                   break;
@@ -12240,12 +12309,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$208 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$211 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$208 &&
+    shouldFireAfterActiveInstanceBlur$211 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -12324,7 +12393,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$209 = rootWithPendingPassiveEffects,
+    var root$212 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -12340,7 +12409,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$209, remainingLanes);
+        releaseRootPooledCache(root$212, remainingLanes);
     }
   }
   return !1;
@@ -13647,12 +13716,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$211 = fiber.stateNode;
-      if (root$211.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$211.pendingLanes);
+      var root$214 = fiber.stateNode;
+      if (root$214.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$214.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$211, lanes | 2),
-          ensureRootIsScheduled(root$211, now()),
+          (markRootEntangled(root$214, lanes | 2),
+          ensureRootIsScheduled(root$214, now()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncCallbacks()));
@@ -14224,19 +14293,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$313;
+  var JSCompiler_inline_result$jscomp$317;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1587 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1587) {
-      var element$jscomp$inline_1588 = document.createElement("div");
-      element$jscomp$inline_1588.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1587 =
-        "function" === typeof element$jscomp$inline_1588.oninput;
+    var isSupported$jscomp$inline_1602 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1602) {
+      var element$jscomp$inline_1603 = document.createElement("div");
+      element$jscomp$inline_1603.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1602 =
+        "function" === typeof element$jscomp$inline_1603.oninput;
     }
-    JSCompiler_inline_result$jscomp$313 = isSupported$jscomp$inline_1587;
-  } else JSCompiler_inline_result$jscomp$313 = !1;
+    JSCompiler_inline_result$jscomp$317 = isSupported$jscomp$inline_1602;
+  } else JSCompiler_inline_result$jscomp$317 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$313 &&
+    JSCompiler_inline_result$jscomp$317 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -14374,20 +14443,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1600 = 0;
-  i$jscomp$inline_1600 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1600++
+  var i$jscomp$inline_1615 = 0;
+  i$jscomp$inline_1615 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1615++
 ) {
-  var eventName$jscomp$inline_1601 =
-      simpleEventPluginEvents[i$jscomp$inline_1600],
-    domEventName$jscomp$inline_1602 =
-      eventName$jscomp$inline_1601.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1603 =
-      eventName$jscomp$inline_1601[0].toUpperCase() +
-      eventName$jscomp$inline_1601.slice(1);
+  var eventName$jscomp$inline_1616 =
+      simpleEventPluginEvents[i$jscomp$inline_1615],
+    domEventName$jscomp$inline_1617 =
+      eventName$jscomp$inline_1616.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1618 =
+      eventName$jscomp$inline_1616[0].toUpperCase() +
+      eventName$jscomp$inline_1616.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1602,
-    "on" + capitalizedEvent$jscomp$inline_1603
+    domEventName$jscomp$inline_1617,
+    "on" + capitalizedEvent$jscomp$inline_1618
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15966,11 +16035,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$226);
+        var instance = getPublicRootInstance(root$229);
         originalCallback.call(instance);
       };
     }
-    var root$226 = createHydrationContainer(
+    var root$229 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -15982,23 +16051,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$226;
-    container[internalContainerInstanceKey] = root$226.current;
+    container._reactRootContainer = root$229;
+    container[internalContainerInstanceKey] = root$229.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$226;
+    return root$229;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$227 = callback;
+    var originalCallback$230 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$228);
-      originalCallback$227.call(instance);
+      var instance = getPublicRootInstance(root$231);
+      originalCallback$230.call(instance);
     };
   }
-  var root$228 = createFiberRoot(
+  var root$231 = createFiberRoot(
     container,
     0,
     !1,
@@ -16010,15 +16079,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$228;
-  container[internalContainerInstanceKey] = root$228.current;
+  container._reactRootContainer = root$231;
+  container[internalContainerInstanceKey] = root$231.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$228, parentComponent, callback);
+    updateContainer(initialChildren, root$231, parentComponent, callback);
   });
-  return root$228;
+  return root$231;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -16077,17 +16146,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1756 = {
+var devToolsConfig$jscomp$inline_1771 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-4e1d3091",
+  version: "18.3.0-www-classic-e5f7b5c5",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2133 = {
-  bundleType: devToolsConfig$jscomp$inline_1756.bundleType,
-  version: devToolsConfig$jscomp$inline_1756.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1756.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1756.rendererConfig,
+var internals$jscomp$inline_2145 = {
+  bundleType: devToolsConfig$jscomp$inline_1771.bundleType,
+  version: devToolsConfig$jscomp$inline_1771.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1771.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1771.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16103,26 +16172,26 @@ var internals$jscomp$inline_2133 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1756.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1771.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-4e1d3091"
+  reconcilerVersion: "18.3.0-www-classic-e5f7b5c5"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2134 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2146 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2134.isDisabled &&
-    hook$jscomp$inline_2134.supportsFiber
+    !hook$jscomp$inline_2146.isDisabled &&
+    hook$jscomp$inline_2146.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2134.inject(
-        internals$jscomp$inline_2133
+      (rendererID = hook$jscomp$inline_2146.inject(
+        internals$jscomp$inline_2145
       )),
-        (injectedHook = hook$jscomp$inline_2134);
+        (injectedHook = hook$jscomp$inline_2146);
     } catch (err) {}
 }
 assign(Internals, {
@@ -16350,4 +16419,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-4e1d3091";
+exports.version = "18.3.0-www-classic-e5f7b5c5";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
index 44b2da7eab..31b6a133c5 100644
--- a/compiled/facebook-www/ReactDOM-prod.modern.js
+++ b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -6476,6 +6476,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -6551,13 +6570,13 @@ function completeWork(current, workInProgress, renderLanes) {
     case 1:
       return bubbleProperties(workInProgress), null;
     case 3:
-      renderLanes = workInProgress.stateNode;
+      newProps = workInProgress.stateNode;
       enableTransitionTracing &&
         null !== workInProgressTransitions &&
         (workInProgress.flags |= 2048);
-      newProps = null;
-      null !== current && (newProps = current.memoizedState.cache);
-      workInProgress.memoizedState.cache !== newProps &&
+      renderLanes = null;
+      null !== current && (renderLanes = current.memoizedState.cache);
+      workInProgress.memoizedState.cache !== renderLanes &&
         (workInProgress.flags |= 2048);
       popProvider(CacheContext);
       enableTransitionTracing &&
@@ -6566,9 +6585,9 @@ function completeWork(current, workInProgress, renderLanes) {
       enableTransitionTracing && pop(transitionStack);
       popHostContainer();
       resetWorkInProgressVersions();
-      renderLanes.pendingContext &&
-        ((renderLanes.context = renderLanes.pendingContext),
-        (renderLanes.pendingContext = null));
+      newProps.pendingContext &&
+        ((newProps.context = newProps.pendingContext),
+        (newProps.pendingContext = null));
       if (null === current || null === current.child)
         popHydrationState(workInProgress)
           ? markUpdate(workInProgress)
@@ -6585,39 +6604,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -6629,7 +6650,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -6654,64 +6679,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -6744,25 +6786,25 @@ function completeWork(current, workInProgress, renderLanes) {
           throw Error(formatProdErrorMessage(166));
         current = rootInstanceStackCursor.current;
         if (popHydrationState(workInProgress)) {
-          newProps = workInProgress.stateNode;
+          renderLanes = workInProgress.stateNode;
           current = workInProgress.memoizedProps;
-          newProps[internalInstanceKey] = workInProgress;
-          if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+          renderLanes[internalInstanceKey] = workInProgress;
+          if ((newProps = renderLanes.nodeValue !== current))
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
-                  newProps = newProps.nodeValue;
+                  renderLanes = renderLanes.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
-                  normalizeMarkupForTextOrAttribute(newProps);
+                  normalizeMarkupForTextOrAttribute(renderLanes);
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
-                    ((newProps = newProps.nodeValue),
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
+                    ((renderLanes = renderLanes.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
-                    normalizeMarkupForTextOrAttribute(newProps));
+                    normalizeMarkupForTextOrAttribute(renderLanes));
               }
-          renderLanes && markUpdate(workInProgress);
+          newProps && markUpdate(workInProgress);
         } else
           (current =
             getOwnerDocumentFromRootContainer(current).createTextNode(
@@ -6790,50 +6832,51 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
                 (workInProgress.memoizedState = null),
               (workInProgress.flags |= 4);
           bubbleProperties(workInProgress);
-          type = !1;
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
-      renderLanes = null !== newProps;
+      newProps = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
-        null !== newProps.alternate &&
-          null !== newProps.alternate.memoizedState &&
-          null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$110 = null;
-        null !== newProps.memoizedState &&
-          null !== newProps.memoizedState.cachePool &&
-          (cache$110 = newProps.memoizedState.cachePool.pool);
-        cache$110 !== type && (newProps.flags |= 2048);
-      }
-      renderLanes !== current &&
+      newProps &&
+        ((renderLanes = workInProgress.child),
+        (nextResource = null),
+        null !== renderLanes.alternate &&
+          null !== renderLanes.alternate.memoizedState &&
+          null !== renderLanes.alternate.memoizedState.cachePool &&
+          (nextResource = renderLanes.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
+        null !== renderLanes.memoizedState &&
+          null !== renderLanes.memoizedState.cachePool &&
+          (currentResource = renderLanes.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (renderLanes.flags |= 2048));
+      newProps !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
-        renderLanes && (workInProgress.child.flags |= 8192));
+        newProps && (workInProgress.child.flags |= 8192));
       scheduleRetryEffect(workInProgress, workInProgress.updateQueue);
       null !== workInProgress.updateQueue &&
         null != workInProgress.memoizedProps.suspenseCallback &&
@@ -6858,30 +6901,30 @@ function completeWork(current, workInProgress, renderLanes) {
       return bubbleProperties(workInProgress), null;
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$110 = type.rendering;
-      if (null === cache$110)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$110 = findFirstSuspended(current);
-              if (null !== cache$110) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$110.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
                 current = renderLanes;
-                for (renderLanes = workInProgress.child; null !== renderLanes; )
-                  resetWorkInProgress(renderLanes, current),
-                    (renderLanes = renderLanes.sibling);
+                for (newProps = workInProgress.child; null !== newProps; )
+                  resetWorkInProgress(newProps, current),
+                    (newProps = newProps.sibling);
                 push(
                   suspenseStackCursor,
                   (suspenseStackCursor.current & 1) | 2
@@ -6890,52 +6933,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$110)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$110.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now() - type.renderingStartTime >
+            2 * now() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$110.sibling = workInProgress.child),
-            (workInProgress.child = cache$110))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$110)
-              : (workInProgress.child = cache$110),
-            (type.last = cache$110));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -6980,27 +7025,27 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.subtreeFlags & 6 &&
               (workInProgress.flags |= 8192))
           : bubbleProperties(workInProgress),
-        (renderLanes = workInProgress.updateQueue),
-        null !== renderLanes &&
-          scheduleRetryEffect(workInProgress, renderLanes.retryQueue),
-        (renderLanes = null),
+        (newProps = workInProgress.updateQueue),
+        null !== newProps &&
+          scheduleRetryEffect(workInProgress, newProps.retryQueue),
+        (newProps = null),
         null !== current &&
           null !== current.memoizedState &&
           null !== current.memoizedState.cachePool &&
-          (renderLanes = current.memoizedState.cachePool.pool),
-        (newProps = null),
+          (newProps = current.memoizedState.cachePool.pool),
+        (renderLanes = null),
         null !== workInProgress.memoizedState &&
           null !== workInProgress.memoizedState.cachePool &&
-          (newProps = workInProgress.memoizedState.cachePool.pool),
-        newProps !== renderLanes && (workInProgress.flags |= 2048),
+          (renderLanes = workInProgress.memoizedState.cachePool.pool),
+        renderLanes !== newProps && (workInProgress.flags |= 2048),
         popTransition(workInProgress, current),
         null
       );
     case 24:
       return (
-        (renderLanes = null),
-        null !== current && (renderLanes = current.memoizedState.cache),
-        workInProgress.memoizedState.cache !== renderLanes &&
+        (newProps = null),
+        null !== current && (newProps = current.memoizedState.cache),
+        workInProgress.memoizedState.cache !== newProps &&
           (workInProgress.flags |= 2048),
         popProvider(CacheContext),
         bubbleProperties(workInProgress),
@@ -7220,8 +7265,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$127) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$127);
+      } catch (error$128) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$128);
       }
     else ref.current = null;
 }
@@ -7258,7 +7303,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$188) {
+          } catch (e$189) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7534,11 +7579,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$129) {
+          } catch (error$130) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$129
+              error$130
             );
           }
         }
@@ -8212,8 +8257,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$142) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
+        } catch (error$143) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$143);
         }
       }
       break;
@@ -8391,11 +8436,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$143) {
+          } catch (error$144) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$143
+              error$144
             );
           }
       break;
@@ -8431,8 +8476,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$144) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
+        } catch (error$145) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
         }
       }
       if (
@@ -8449,8 +8494,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$147) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
+        } catch (error$148) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
         }
       break;
     case 6:
@@ -8463,8 +8508,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$149) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
         }
       }
       break;
@@ -8478,8 +8523,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$149) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
+        } catch (error$150) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
         }
       break;
     case 4:
@@ -8509,8 +8554,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$151) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
+        } catch (error$152) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$152);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8588,11 +8633,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$132) {
+              } catch (error$133) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$132
+                  error$133
                 );
               }
           } else if (
@@ -8667,21 +8712,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$133 = JSCompiler_inline_result.stateNode;
+            var parent$134 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$133, ""),
+              (setTextContent(parent$134, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$134 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$134, parent$133);
+            var before$135 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$135, parent$134);
             break;
           case 3:
           case 4:
-            var parent$135 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$136 = getHostSibling(finishedWork);
+            var parent$136 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$137 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$136,
-              parent$135
+              before$137,
+              parent$136
             );
             break;
           default:
@@ -9151,9 +9196,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$161 = finishedWork.stateNode;
+        var instance$162 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$161._visibility & 4
+          ? instance$162._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9166,7 +9211,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$161._visibility |= 4),
+            : ((instance$162._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9174,7 +9219,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$161._visibility |= 4),
+          : ((instance$162._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9187,7 +9232,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$161
+            instance$162
           );
         break;
       case 24:
@@ -9258,8 +9303,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -9268,7 +9314,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -9286,6 +9332,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -9773,16 +9830,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$170 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$171 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$170 &&
-            ((lanes = errorRetryLanes$170),
+          0 !== errorRetryLanes$171 &&
+            ((lanes = errorRetryLanes$171),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$170
+              errorRetryLanes$171
             )));
         }
         if (1 === exitStatus)
@@ -9843,14 +9900,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$170 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$171 = -1; 0 < exitStatus; ) {
             var index$1 = 31 - clz32(exitStatus),
               lane = 1 << index$1;
             index$1 = errorRetryLanes[index$1];
-            index$1 > errorRetryLanes$170 && (errorRetryLanes$170 = index$1);
+            index$1 > errorRetryLanes$171 && (errorRetryLanes$171 = index$1);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$170;
+          exitStatus = errorRetryLanes$171;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10138,18 +10195,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -10170,6 +10217,20 @@ function handleThrow(root, thrownValue) {
     ((workInProgressRootExitStatus = 1),
     (workInProgressRootFatalError = thrownValue));
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -10217,8 +10278,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$173) {
-      handleThrow(root, thrownValue$173);
+    } catch (thrownValue$174) {
+      handleThrow(root, thrownValue$174);
     }
   while (1);
   resetContextDependencies();
@@ -10324,8 +10385,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$175) {
-      handleThrow(root, thrownValue$175);
+    } catch (thrownValue$176) {
+      handleThrow(root, thrownValue$176);
     }
   while (1);
   resetContextDependencies();
@@ -10680,12 +10741,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$177 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$178 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$177 &&
+    shouldFireAfterActiveInstanceBlur$178 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -10764,7 +10825,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$178 = rootWithPendingPassiveEffects,
+    var root$179 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -10780,7 +10841,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$178, remainingLanes);
+        releaseRootPooledCache(root$179, remainingLanes);
     }
   }
   return !1;
@@ -11973,12 +12034,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$180 = fiber.stateNode;
-      if (root$180.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$180.pendingLanes);
+      var root$181 = fiber.stateNode;
+      if (root$181.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$181.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$180, lanes | 2),
-          ensureRootIsScheduled(root$180, now()),
+          (markRootEntangled(root$181, lanes | 2),
+          ensureRootIsScheduled(root$181, now()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncCallbacks()));
@@ -13252,19 +13313,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$296;
+  var JSCompiler_inline_result$jscomp$299;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1511 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1511) {
-      var element$jscomp$inline_1512 = document.createElement("div");
-      element$jscomp$inline_1512.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1511 =
-        "function" === typeof element$jscomp$inline_1512.oninput;
+    var isSupported$jscomp$inline_1526 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1526) {
+      var element$jscomp$inline_1527 = document.createElement("div");
+      element$jscomp$inline_1527.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1526 =
+        "function" === typeof element$jscomp$inline_1527.oninput;
     }
-    JSCompiler_inline_result$jscomp$296 = isSupported$jscomp$inline_1511;
-  } else JSCompiler_inline_result$jscomp$296 = !1;
+    JSCompiler_inline_result$jscomp$299 = isSupported$jscomp$inline_1526;
+  } else JSCompiler_inline_result$jscomp$299 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$296 &&
+    JSCompiler_inline_result$jscomp$299 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13573,20 +13634,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1552 = 0;
-  i$jscomp$inline_1552 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1552++
+  var i$jscomp$inline_1567 = 0;
+  i$jscomp$inline_1567 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1567++
 ) {
-  var eventName$jscomp$inline_1553 =
-      simpleEventPluginEvents[i$jscomp$inline_1552],
-    domEventName$jscomp$inline_1554 =
-      eventName$jscomp$inline_1553.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1555 =
-      eventName$jscomp$inline_1553[0].toUpperCase() +
-      eventName$jscomp$inline_1553.slice(1);
+  var eventName$jscomp$inline_1568 =
+      simpleEventPluginEvents[i$jscomp$inline_1567],
+    domEventName$jscomp$inline_1569 =
+      eventName$jscomp$inline_1568.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1570 =
+      eventName$jscomp$inline_1568[0].toUpperCase() +
+      eventName$jscomp$inline_1568.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1554,
-    "on" + capitalizedEvent$jscomp$inline_1555
+    domEventName$jscomp$inline_1569,
+    "on" + capitalizedEvent$jscomp$inline_1570
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -14970,14 +15031,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$198 = getStyleKey(href),
+          var key$199 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$198);
+            resource = as.get(key$199);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$198)
+              getStylesheetSelectorFromKey(key$199)
             ))
           )
             state.loading = 1;
@@ -14988,7 +15049,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$198)) &&
+            (options = preloadPropsMap.get(key$199)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15005,6 +15066,7 @@ function preinit$1(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -15013,15 +15075,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$198, resource);
+          as.set(key$199, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$198 = getScriptKey(href)),
-            (precedence = as.get(key$198)),
+            (key$199 = getScriptKey(href)),
+            (precedence = as.get(key$199)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$198
+                "script[async]" + key$199
               )),
               precedence ||
                 ((href = {
@@ -15030,7 +15092,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$198)) &&
+                (options = preloadPropsMap.get(key$199)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15043,13 +15105,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$198, precedence));
+              as.set(key$199, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$198 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$198 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$198 + '"]';
+        key$199 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$199 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$199 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15066,7 +15128,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$198) &&
+          null === resourceRoot.querySelector(key$199) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15099,17 +15161,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$207 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$208 = styles$207.get(type);
-        resource$208 ||
+        var styles$208 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$209 = styles$208.get(type);
+        resource$209 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$208 = {
+          (resource$209 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$207.set(type, resource$208),
+          styles$208.set(type, resource$209),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15124,9 +15186,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$208.state
+              resource$209.state
             ));
-        return resource$208;
+        return resource$209;
       }
       return null;
     case "script":
@@ -15198,35 +15260,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$213 = hoistableRoot.querySelector(
+        var instance$214 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$213)
+        if (instance$214)
           return (
-            (resource.instance = instance$213),
-            markNodeAsHoistable(instance$213),
-            instance$213
+            (resource.instance = instance$214),
+            markNodeAsHoistable(instance$214),
+            instance$214
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$213 = (
+        instance$214 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$213);
-        var linkInstance = instance$213;
+        markNodeAsHoistable(instance$214);
+        var linkInstance = instance$214;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$213, "link", key);
-        insertStylesheet(instance$213, props.precedence, hoistableRoot);
-        return (resource.instance = instance$213);
+        setInitialProperties(instance$214, "link", key);
+        resource.state.loading |= 4;
+        insertStylesheet(instance$214, props.precedence, hoistableRoot);
+        return (resource.instance = instance$214);
       case "script":
-        instance$213 = getScriptKey(props.src);
+        instance$214 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$213
+            "script[async]" + instance$214
           ))
         )
           return (
@@ -15235,7 +15298,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$213)))
+        if ((styleProps = preloadPropsMap.get(instance$214)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -15249,6 +15312,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -15600,17 +15669,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1725 = {
+var devToolsConfig$jscomp$inline_1740 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-6018b0e1",
+  version: "18.3.0-www-modern-fdb5487c",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2120 = {
-  bundleType: devToolsConfig$jscomp$inline_1725.bundleType,
-  version: devToolsConfig$jscomp$inline_1725.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1725.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1725.rendererConfig,
+var internals$jscomp$inline_2132 = {
+  bundleType: devToolsConfig$jscomp$inline_1740.bundleType,
+  version: devToolsConfig$jscomp$inline_1740.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1740.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1740.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -15627,26 +15696,26 @@ var internals$jscomp$inline_2120 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1725.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1740.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-6018b0e1"
+  reconcilerVersion: "18.3.0-www-modern-fdb5487c"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2121 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2133 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2121.isDisabled &&
-    hook$jscomp$inline_2121.supportsFiber
+    !hook$jscomp$inline_2133.isDisabled &&
+    hook$jscomp$inline_2133.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2121.inject(
-        internals$jscomp$inline_2120
+      (rendererID = hook$jscomp$inline_2133.inject(
+        internals$jscomp$inline_2132
       )),
-        (injectedHook = hook$jscomp$inline_2121);
+        (injectedHook = hook$jscomp$inline_2133);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -15803,4 +15872,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-6018b0e1";
+exports.version = "18.3.0-www-modern-fdb5487c";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
index e96a3297be..1172215025 100644
--- a/compiled/facebook-www/ReactDOM-profiling.classic.js
+++ b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -2496,6 +2496,7 @@ function preinit$1(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -2711,6 +2712,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(instance$36, "link", key);
+        resource.state.loading |= 4;
         insertStylesheet(instance$36, props.precedence, hoistableRoot);
         return (resource.instance = instance$36);
       case "script":
@@ -2740,6 +2742,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -5011,10 +5019,10 @@ createFunctionComponentUpdateQueue = function () {
 function use(usable) {
   if (null !== usable && "object" === typeof usable) {
     if ("function" === typeof usable.then) {
-      var index$76 = thenableIndexCounter;
+      var index$78 = thenableIndexCounter;
       thenableIndexCounter += 1;
       null === thenableState && (thenableState = []);
-      usable = trackUsedThenable(thenableState, usable, index$76);
+      usable = trackUsedThenable(thenableState, usable, index$78);
       null === currentlyRenderingFiber$1.alternate &&
         (null === workInProgressHook
           ? null === currentlyRenderingFiber$1.memoizedState
@@ -5506,16 +5514,16 @@ function refreshCache(fiber, seedKey, seedValue) {
       case 3:
         var lane = requestUpdateLane(provider);
         fiber = createUpdate(lane);
-        var root$82 = enqueueUpdate(provider, fiber, lane);
-        if (null !== root$82) {
+        var root$84 = enqueueUpdate(provider, fiber, lane);
+        if (null !== root$84) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root$82, provider, lane, eventTime);
-          entangleTransitions(root$82, provider, lane);
+          scheduleUpdateOnFiber(root$84, provider, lane, eventTime);
+          entangleTransitions(root$84, provider, lane);
         }
         provider = createCache();
         null !== seedKey &&
           void 0 !== seedKey &&
-          null !== root$82 &&
+          null !== root$84 &&
           provider.data.set(seedKey, seedValue);
         fiber.payload = { cache: provider };
         return;
@@ -5724,15 +5732,15 @@ var HooksDispatcherOnMount = {
       getServerSnapshot = getServerSnapshot();
     } else {
       getServerSnapshot = getSnapshot();
-      var root$78 = workInProgressRoot;
-      if (null === root$78) throw Error(formatProdErrorMessage(349));
-      includesBlockingLane(root$78, renderLanes$1) ||
+      var root$80 = workInProgressRoot;
+      if (null === root$80) throw Error(formatProdErrorMessage(349));
+      includesBlockingLane(root$80, renderLanes$1) ||
         pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot);
     }
     hook.memoizedState = getServerSnapshot;
-    root$78 = { value: getServerSnapshot, getSnapshot: getSnapshot };
-    hook.queue = root$78;
-    mountEffect(subscribeToStore.bind(null, fiber, root$78, subscribe), [
+    root$80 = { value: getServerSnapshot, getSnapshot: getSnapshot };
+    hook.queue = root$80;
+    mountEffect(subscribeToStore.bind(null, fiber, root$80, subscribe), [
       subscribe
     ]);
     fiber.flags |= 2048;
@@ -5741,7 +5749,7 @@ var HooksDispatcherOnMount = {
       updateStoreInstance.bind(
         null,
         fiber,
-        root$78,
+        root$80,
         getServerSnapshot,
         getSnapshot
       ),
@@ -6309,10 +6317,10 @@ var markerInstanceStack = createCursor(null);
 function pushRootMarkerInstance(workInProgress) {
   if (enableTransitionTracing) {
     var transitions = workInProgressTransitions,
-      root$95 = workInProgress.stateNode;
+      root$97 = workInProgress.stateNode;
     null !== transitions &&
       transitions.forEach(function (transition) {
-        if (!root$95.incompleteTransitions.has(transition)) {
+        if (!root$97.incompleteTransitions.has(transition)) {
           var markerInstance = {
             tag: 0,
             transitions: new Set([transition]),
@@ -6320,11 +6328,11 @@ function pushRootMarkerInstance(workInProgress) {
             aborts: null,
             name: null
           };
-          root$95.incompleteTransitions.set(transition, markerInstance);
+          root$97.incompleteTransitions.set(transition, markerInstance);
         }
       });
     var markerInstances = [];
-    root$95.incompleteTransitions.forEach(function (markerInstance) {
+    root$97.incompleteTransitions.forEach(function (markerInstance) {
       markerInstances.push(markerInstance);
     });
     push(markerInstanceStack, markerInstances);
@@ -7037,14 +7045,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   }
   JSCompiler_temp = current.memoizedState;
   if (null !== JSCompiler_temp) {
-    var dehydrated$102 = JSCompiler_temp.dehydrated;
-    if (null !== dehydrated$102)
+    var dehydrated$104 = JSCompiler_temp.dehydrated;
+    if (null !== dehydrated$104)
       return updateDehydratedSuspenseComponent(
         current,
         workInProgress,
         didSuspend,
         nextProps,
-        dehydrated$102,
+        dehydrated$104,
         JSCompiler_temp,
         renderLanes
       );
@@ -7054,7 +7062,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     showFallback = nextProps.fallback;
     didSuspend = workInProgress.mode;
     JSCompiler_temp = current.child;
-    dehydrated$102 = JSCompiler_temp.sibling;
+    dehydrated$104 = JSCompiler_temp.sibling;
     var primaryChildProps = { mode: "hidden", children: nextProps.children };
     0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp
       ? ((nextProps = workInProgress.child),
@@ -7068,8 +7076,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         (workInProgress.deletions = null))
       : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)),
         (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280));
-    null !== dehydrated$102
-      ? (showFallback = createWorkInProgress(dehydrated$102, showFallback))
+    null !== dehydrated$104
+      ? (showFallback = createWorkInProgress(dehydrated$104, showFallback))
       : ((showFallback = createFiberFromFragment(
           showFallback,
           didSuspend,
@@ -7088,10 +7096,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       ? (didSuspend = mountSuspenseOffscreenState(renderLanes))
       : ((JSCompiler_temp = didSuspend.cachePool),
         null !== JSCompiler_temp
-          ? ((dehydrated$102 = CacheContext._currentValue),
+          ? ((dehydrated$104 = CacheContext._currentValue),
             (JSCompiler_temp =
-              JSCompiler_temp.parent !== dehydrated$102
-                ? { parent: dehydrated$102, pool: dehydrated$102 }
+              JSCompiler_temp.parent !== dehydrated$104
+                ? { parent: dehydrated$104, pool: dehydrated$104 }
                 : JSCompiler_temp))
           : (JSCompiler_temp = getSuspendedCache()),
         (didSuspend = {
@@ -7105,23 +7113,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         ((JSCompiler_temp = enableTransitionTracing
           ? markerInstanceStack.current
           : null),
-        (dehydrated$102 = showFallback.updateQueue),
+        (dehydrated$104 = showFallback.updateQueue),
         (primaryChildProps = current.updateQueue),
-        null === dehydrated$102
+        null === dehydrated$104
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue: null
             })
-          : dehydrated$102 === primaryChildProps
+          : dehydrated$104 === primaryChildProps
           ? (showFallback.updateQueue = {
               transitions: didSuspend,
               markerInstances: JSCompiler_temp,
               retryQueue:
                 null !== primaryChildProps ? primaryChildProps.retryQueue : null
             })
-          : ((dehydrated$102.transitions = didSuspend),
-            (dehydrated$102.markerInstances = JSCompiler_temp))));
+          : ((dehydrated$104.transitions = didSuspend),
+            (dehydrated$104.markerInstances = JSCompiler_temp))));
     showFallback.childLanes = current.childLanes & ~renderLanes;
     workInProgress.memoizedState = SUSPENDED_MARKER;
     return nextProps;
@@ -8269,6 +8277,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -8292,14 +8319,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
         break;
       case "collapsed":
         lastTailNode = renderState.tail;
-        for (var lastTailNode$134 = null; null !== lastTailNode; )
-          null !== lastTailNode.alternate && (lastTailNode$134 = lastTailNode),
+        for (var lastTailNode$136 = null; null !== lastTailNode; )
+          null !== lastTailNode.alternate && (lastTailNode$136 = lastTailNode),
             (lastTailNode = lastTailNode.sibling);
-        null === lastTailNode$134
+        null === lastTailNode$136
           ? hasRenderedATailFallback || null === renderState.tail
             ? (renderState.tail = null)
             : (renderState.tail.sibling = null)
-          : (lastTailNode$134.sibling = null);
+          : (lastTailNode$136.sibling = null);
     }
 }
 function bubbleProperties(completedWork) {
@@ -8311,53 +8338,53 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     if (0 !== (completedWork.mode & 2)) {
       for (
-        var treeBaseDuration$136 = completedWork.selfBaseDuration,
-          child$137 = completedWork.child;
-        null !== child$137;
+        var treeBaseDuration$138 = completedWork.selfBaseDuration,
+          child$139 = completedWork.child;
+        null !== child$139;
 
       )
-        (newChildLanes |= child$137.lanes | child$137.childLanes),
-          (subtreeFlags |= child$137.subtreeFlags & 31457280),
-          (subtreeFlags |= child$137.flags & 31457280),
-          (treeBaseDuration$136 += child$137.treeBaseDuration),
-          (child$137 = child$137.sibling);
-      completedWork.treeBaseDuration = treeBaseDuration$136;
+        (newChildLanes |= child$139.lanes | child$139.childLanes),
+          (subtreeFlags |= child$139.subtreeFlags & 31457280),
+          (subtreeFlags |= child$139.flags & 31457280),
+          (treeBaseDuration$138 += child$139.treeBaseDuration),
+          (child$139 = child$139.sibling);
+      completedWork.treeBaseDuration = treeBaseDuration$138;
     } else
       for (
-        treeBaseDuration$136 = completedWork.child;
-        null !== treeBaseDuration$136;
+        treeBaseDuration$138 = completedWork.child;
+        null !== treeBaseDuration$138;
 
       )
         (newChildLanes |=
-          treeBaseDuration$136.lanes | treeBaseDuration$136.childLanes),
-          (subtreeFlags |= treeBaseDuration$136.subtreeFlags & 31457280),
-          (subtreeFlags |= treeBaseDuration$136.flags & 31457280),
-          (treeBaseDuration$136.return = completedWork),
-          (treeBaseDuration$136 = treeBaseDuration$136.sibling);
+          treeBaseDuration$138.lanes | treeBaseDuration$138.childLanes),
+          (subtreeFlags |= treeBaseDuration$138.subtreeFlags & 31457280),
+          (subtreeFlags |= treeBaseDuration$138.flags & 31457280),
+          (treeBaseDuration$138.return = completedWork),
+          (treeBaseDuration$138 = treeBaseDuration$138.sibling);
   else if (0 !== (completedWork.mode & 2)) {
-    treeBaseDuration$136 = completedWork.actualDuration;
-    child$137 = completedWork.selfBaseDuration;
+    treeBaseDuration$138 = completedWork.actualDuration;
+    child$139 = completedWork.selfBaseDuration;
     for (var child = completedWork.child; null !== child; )
       (newChildLanes |= child.lanes | child.childLanes),
         (subtreeFlags |= child.subtreeFlags),
         (subtreeFlags |= child.flags),
-        (treeBaseDuration$136 += child.actualDuration),
-        (child$137 += child.treeBaseDuration),
+        (treeBaseDuration$138 += child.actualDuration),
+        (child$139 += child.treeBaseDuration),
         (child = child.sibling);
-    completedWork.actualDuration = treeBaseDuration$136;
-    completedWork.treeBaseDuration = child$137;
+    completedWork.actualDuration = treeBaseDuration$138;
+    completedWork.treeBaseDuration = child$139;
   } else
     for (
-      treeBaseDuration$136 = completedWork.child;
-      null !== treeBaseDuration$136;
+      treeBaseDuration$138 = completedWork.child;
+      null !== treeBaseDuration$138;
 
     )
       (newChildLanes |=
-        treeBaseDuration$136.lanes | treeBaseDuration$136.childLanes),
-        (subtreeFlags |= treeBaseDuration$136.subtreeFlags),
-        (subtreeFlags |= treeBaseDuration$136.flags),
-        (treeBaseDuration$136.return = completedWork),
-        (treeBaseDuration$136 = treeBaseDuration$136.sibling);
+        treeBaseDuration$138.lanes | treeBaseDuration$138.childLanes),
+        (subtreeFlags |= treeBaseDuration$138.subtreeFlags),
+        (subtreeFlags |= treeBaseDuration$138.flags),
+        (treeBaseDuration$138.return = completedWork),
+        (treeBaseDuration$138 = treeBaseDuration$138.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -8420,39 +8447,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -8464,7 +8493,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor$1.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -8489,64 +8522,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -8583,8 +8633,8 @@ function completeWork(current, workInProgress, renderLanes) {
           current = workInProgress.memoizedProps;
           newProps[internalInstanceKey] = workInProgress;
           if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
                   newProps = newProps.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
@@ -8592,7 +8642,7 @@ function completeWork(current, workInProgress, renderLanes) {
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
                     ((newProps = newProps.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
                     normalizeMarkupForTextOrAttribute(newProps));
@@ -8625,23 +8675,25 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
             bubbleProperties(workInProgress);
             0 !== (workInProgress.mode & 2) &&
               null !== newProps &&
-              ((type = workInProgress.child),
-              null !== type &&
-                (workInProgress.treeBaseDuration -= type.treeBaseDuration));
+              ((nextResource = workInProgress.child),
+              null !== nextResource &&
+                (workInProgress.treeBaseDuration -=
+                  nextResource.treeBaseDuration));
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
@@ -8650,15 +8702,17 @@ function completeWork(current, workInProgress, renderLanes) {
               bubbleProperties(workInProgress),
               0 !== (workInProgress.mode & 2) &&
                 null !== newProps &&
-                ((type = workInProgress.child),
-                null !== type &&
-                  (workInProgress.treeBaseDuration -= type.treeBaseDuration));
-          type = !1;
+                ((nextResource = workInProgress.child),
+                null !== nextResource &&
+                  (workInProgress.treeBaseDuration -=
+                    nextResource.treeBaseDuration));
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (
@@ -8669,19 +8723,18 @@ function completeWork(current, workInProgress, renderLanes) {
         );
       renderLanes = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
+      renderLanes &&
+        ((newProps = workInProgress.child),
+        (nextResource = null),
         null !== newProps.alternate &&
           null !== newProps.alternate.memoizedState &&
           null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$151 = null;
+          (nextResource = newProps.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
         null !== newProps.memoizedState &&
           null !== newProps.memoizedState.cachePool &&
-          (cache$151 = newProps.memoizedState.cachePool.pool);
-        cache$151 !== type && (newProps.flags |= 2048);
-      }
+          (currentResource = newProps.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (newProps.flags |= 2048));
       renderLanes !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
         renderLanes && (workInProgress.child.flags |= 8192));
@@ -8718,23 +8771,23 @@ function completeWork(current, workInProgress, renderLanes) {
       );
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$151 = type.rendering;
-      if (null === cache$151)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$151 = findFirstSuspended(current);
-              if (null !== cache$151) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$151.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
@@ -8750,52 +8803,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now$1() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$151)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$151.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now$1() - type.renderingStartTime >
+            2 * now$1() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$151.sibling = workInProgress.child),
-            (workInProgress.child = cache$151))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$151)
-              : (workInProgress.child = cache$151),
-            (type.last = cache$151));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now$1()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now$1()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -9132,8 +9187,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error$169) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$169);
+      } catch (error$172) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$172);
       }
     else ref.current = null;
 }
@@ -9431,11 +9486,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) {
         var _finishedWork$memoize = finishedWork.memoizedProps,
           id = _finishedWork$memoize.id;
         _finishedWork$memoize = _finishedWork$memoize.onPostCommit;
-        var commitTime$171 = commitTime,
+        var commitTime$174 = commitTime,
           phase = null === finishedWork.alternate ? "mount" : "update";
         currentUpdateIsNested && (phase = "nested-update");
         "function" === typeof _finishedWork$memoize &&
-          _finishedWork$memoize(id, phase, finishedRoot, commitTime$171);
+          _finishedWork$memoize(id, phase, finishedRoot, commitTime$174);
         finishedWork = finishedWork.return;
         a: for (; null !== finishedWork; ) {
           switch (finishedWork.tag) {
@@ -9462,8 +9517,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$173) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$173);
+    } catch (error$176) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$176);
     }
 }
 function commitClassCallbacks(finishedWork) {
@@ -9562,11 +9617,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
           } else
             try {
               finishedRoot.componentDidMount();
-            } catch (error$174) {
+            } catch (error$177) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$174
+                error$177
               );
             }
         else {
@@ -9583,11 +9638,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                   current,
                   finishedRoot.__reactInternalSnapshotBeforeUpdate
                 );
-            } catch (error$175) {
+            } catch (error$178) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$175
+                error$178
               );
             }
             recordLayoutEffectDuration(finishedWork);
@@ -9598,11 +9653,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                 current,
                 finishedRoot.__reactInternalSnapshotBeforeUpdate
               );
-            } catch (error$176) {
+            } catch (error$179) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$176
+                error$179
               );
             }
         }
@@ -10301,22 +10356,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           try {
             startLayoutEffectTimer(),
               commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$191) {
+          } catch (error$194) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$191
+              error$194
             );
           }
           recordLayoutEffectDuration(finishedWork);
         } else
           try {
             commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$192) {
+          } catch (error$195) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$192
+              error$195
             );
           }
       }
@@ -10495,11 +10550,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$193) {
+          } catch (error$196) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$193
+              error$196
             );
           }
       break;
@@ -10535,8 +10590,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$194) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$194);
+        } catch (error$197) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$197);
         }
       }
       if (
@@ -10553,8 +10608,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$197) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$197);
+        } catch (error$200) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$200);
         }
       break;
     case 6:
@@ -10567,8 +10622,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$198) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$198);
+        } catch (error$201) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$201);
         }
       }
       break;
@@ -10582,8 +10637,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$199) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$199);
+        } catch (error$202) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$202);
         }
       break;
     case 4:
@@ -10613,8 +10668,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$201) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$201);
+        } catch (error$204) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$204);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -10692,11 +10747,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$181) {
+              } catch (error$184) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$181
+                  error$184
                 );
               }
           } else if (
@@ -10771,21 +10826,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$182 = JSCompiler_inline_result.stateNode;
+            var parent$185 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$182, ""),
+              (setTextContent(parent$185, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$183 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$183, parent$182);
+            var before$186 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$186, parent$185);
             break;
           case 3:
           case 4:
-            var parent$184 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$185 = getHostSibling(finishedWork);
+            var parent$187 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$188 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$185,
-              parent$184
+              before$188,
+              parent$187
             );
             break;
           default:
@@ -10977,8 +11032,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$207) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$207);
+    } catch (error$210) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$210);
     }
 }
 function commitOffscreenPassiveMountEffects(current, finishedWork, instance) {
@@ -11277,9 +11332,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$212 = finishedWork.stateNode;
+        var instance$215 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$212._visibility & 4
+          ? instance$215._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -11292,7 +11347,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$212._visibility |= 4),
+            : ((instance$215._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -11300,7 +11355,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$212._visibility |= 4),
+          : ((instance$215._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -11313,7 +11368,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$212
+            instance$215
           );
         break;
       case 24:
@@ -11384,8 +11439,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -11394,7 +11450,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -11412,6 +11468,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -11937,16 +12004,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$221 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$224 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$221 &&
-            ((lanes = errorRetryLanes$221),
+          0 !== errorRetryLanes$224 &&
+            ((lanes = errorRetryLanes$224),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$221
+              errorRetryLanes$224
             )));
         }
         if (1 === exitStatus)
@@ -12007,14 +12074,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$221 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$224 = -1; 0 < exitStatus; ) {
             var index$3 = 31 - clz32(exitStatus),
               lane = 1 << index$3;
             index$3 = errorRetryLanes[index$3];
-            index$3 > errorRetryLanes$221 && (errorRetryLanes$221 = index$3);
+            index$3 > errorRetryLanes$224 && (errorRetryLanes$224 = index$3);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$221;
+          exitStatus = errorRetryLanes$224;
           exitStatus = now$1() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -12304,18 +12371,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -12365,6 +12422,20 @@ function handleThrow(root, thrownValue) {
           );
     }
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -12422,8 +12493,8 @@ function renderRootSync(root, lanes) {
         }
       workLoopSync();
       break;
-    } catch (thrownValue$224) {
-      handleThrow(root, thrownValue$224);
+    } catch (thrownValue$227) {
+      handleThrow(root, thrownValue$227);
     }
   while (1);
   resetContextDependencies();
@@ -12540,8 +12611,8 @@ function renderRootConcurrent(root, lanes) {
         }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$226) {
-      handleThrow(root, thrownValue$226);
+    } catch (thrownValue$229) {
+      handleThrow(root, thrownValue$229);
     }
   while (1);
   resetContextDependencies();
@@ -12716,10 +12787,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) {
                       };
                       suspenseBoundary.updateQueue = newOffscreenQueue;
                     } else {
-                      var retryQueue$90 = offscreenQueue.retryQueue;
-                      null === retryQueue$90
+                      var retryQueue$92 = offscreenQueue.retryQueue;
+                      null === retryQueue$92
                         ? (offscreenQueue.retryQueue = new Set([wakeable]))
-                        : retryQueue$90.add(wakeable);
+                        : retryQueue$92.add(wakeable);
                     }
                   }
                   break;
@@ -12930,7 +13001,7 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$228 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$231 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
@@ -12938,7 +13009,7 @@ function commitRootImpl(
     enableProfilerNestedUpdateScheduledHook &&
       (rootCommittingMutationOrLayoutEffects = root);
     commitMutationEffects(root, finishedWork, lanes);
-    shouldFireAfterActiveInstanceBlur$228 &&
+    shouldFireAfterActiveInstanceBlur$231 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -13032,7 +13103,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$229 = rootWithPendingPassiveEffects,
+    var root$232 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -13048,7 +13119,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$229, remainingLanes);
+        releaseRootPooledCache(root$232, remainingLanes);
     }
   }
   return !1;
@@ -14418,12 +14489,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$232 = fiber.stateNode;
-      if (root$232.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$232.pendingLanes);
+      var root$235 = fiber.stateNode;
+      if (root$235.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$235.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$232, lanes | 2),
-          ensureRootIsScheduled(root$232, now$1()),
+          (markRootEntangled(root$235, lanes | 2),
+          ensureRootIsScheduled(root$235, now$1()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now$1() + 500),
             flushSyncCallbacks()));
@@ -14995,19 +15066,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$334;
+  var JSCompiler_inline_result$jscomp$338;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1667 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1667) {
-      var element$jscomp$inline_1668 = document.createElement("div");
-      element$jscomp$inline_1668.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1667 =
-        "function" === typeof element$jscomp$inline_1668.oninput;
+    var isSupported$jscomp$inline_1682 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1682) {
+      var element$jscomp$inline_1683 = document.createElement("div");
+      element$jscomp$inline_1683.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1682 =
+        "function" === typeof element$jscomp$inline_1683.oninput;
     }
-    JSCompiler_inline_result$jscomp$334 = isSupported$jscomp$inline_1667;
-  } else JSCompiler_inline_result$jscomp$334 = !1;
+    JSCompiler_inline_result$jscomp$338 = isSupported$jscomp$inline_1682;
+  } else JSCompiler_inline_result$jscomp$338 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$334 &&
+    JSCompiler_inline_result$jscomp$338 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -15145,20 +15216,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1680 = 0;
-  i$jscomp$inline_1680 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1680++
+  var i$jscomp$inline_1695 = 0;
+  i$jscomp$inline_1695 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1695++
 ) {
-  var eventName$jscomp$inline_1681 =
-      simpleEventPluginEvents[i$jscomp$inline_1680],
-    domEventName$jscomp$inline_1682 =
-      eventName$jscomp$inline_1681.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1683 =
-      eventName$jscomp$inline_1681[0].toUpperCase() +
-      eventName$jscomp$inline_1681.slice(1);
+  var eventName$jscomp$inline_1696 =
+      simpleEventPluginEvents[i$jscomp$inline_1695],
+    domEventName$jscomp$inline_1697 =
+      eventName$jscomp$inline_1696.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1698 =
+      eventName$jscomp$inline_1696[0].toUpperCase() +
+      eventName$jscomp$inline_1696.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1682,
-    "on" + capitalizedEvent$jscomp$inline_1683
+    domEventName$jscomp$inline_1697,
+    "on" + capitalizedEvent$jscomp$inline_1698
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -16737,11 +16808,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$247);
+        var instance = getPublicRootInstance(root$250);
         originalCallback.call(instance);
       };
     }
-    var root$247 = createHydrationContainer(
+    var root$250 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -16753,23 +16824,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$247;
-    container[internalContainerInstanceKey] = root$247.current;
+    container._reactRootContainer = root$250;
+    container[internalContainerInstanceKey] = root$250.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$247;
+    return root$250;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$248 = callback;
+    var originalCallback$251 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$249);
-      originalCallback$248.call(instance);
+      var instance = getPublicRootInstance(root$252);
+      originalCallback$251.call(instance);
     };
   }
-  var root$249 = createFiberRoot(
+  var root$252 = createFiberRoot(
     container,
     0,
     !1,
@@ -16781,15 +16852,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$249;
-  container[internalContainerInstanceKey] = root$249.current;
+  container._reactRootContainer = root$252;
+  container[internalContainerInstanceKey] = root$252.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$249, parentComponent, callback);
+    updateContainer(initialChildren, root$252, parentComponent, callback);
   });
-  return root$249;
+  return root$252;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -16848,10 +16919,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1836 = {
+var devToolsConfig$jscomp$inline_1851 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-ed706288",
+  version: "18.3.0-www-classic-d28aa28d",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16869,10 +16940,10 @@ var devToolsConfig$jscomp$inline_1836 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1836.bundleType,
-  version: devToolsConfig$jscomp$inline_1836.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1836.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1836.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1851.bundleType,
+  version: devToolsConfig$jscomp$inline_1851.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1851.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1851.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16888,14 +16959,14 @@ var devToolsConfig$jscomp$inline_1836 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1836.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1851.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-ed706288"
+  reconcilerVersion: "18.3.0-www-classic-d28aa28d"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -17122,7 +17193,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-ed706288";
+exports.version = "18.3.0-www-classic-d28aa28d";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
index e3a9da0b26..c7499c651b 100644
--- a/compiled/facebook-www/ReactDOM-profiling.modern.js
+++ b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -6716,6 +6716,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -6861,39 +6880,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -6905,7 +6926,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -6930,64 +6955,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -7024,8 +7066,8 @@ function completeWork(current, workInProgress, renderLanes) {
           current = workInProgress.memoizedProps;
           newProps[internalInstanceKey] = workInProgress;
           if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
                   newProps = newProps.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
@@ -7033,7 +7075,7 @@ function completeWork(current, workInProgress, renderLanes) {
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
                     ((newProps = newProps.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
                     normalizeMarkupForTextOrAttribute(newProps));
@@ -7066,23 +7108,25 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
             bubbleProperties(workInProgress);
             0 !== (workInProgress.mode & 2) &&
               null !== newProps &&
-              ((type = workInProgress.child),
-              null !== type &&
-                (workInProgress.treeBaseDuration -= type.treeBaseDuration));
+              ((nextResource = workInProgress.child),
+              null !== nextResource &&
+                (workInProgress.treeBaseDuration -=
+                  nextResource.treeBaseDuration));
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
@@ -7091,15 +7135,17 @@ function completeWork(current, workInProgress, renderLanes) {
               bubbleProperties(workInProgress),
               0 !== (workInProgress.mode & 2) &&
                 null !== newProps &&
-                ((type = workInProgress.child),
-                null !== type &&
-                  (workInProgress.treeBaseDuration -= type.treeBaseDuration));
-          type = !1;
+                ((nextResource = workInProgress.child),
+                null !== nextResource &&
+                  (workInProgress.treeBaseDuration -=
+                    nextResource.treeBaseDuration));
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (
@@ -7110,19 +7156,18 @@ function completeWork(current, workInProgress, renderLanes) {
         );
       renderLanes = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
+      renderLanes &&
+        ((newProps = workInProgress.child),
+        (nextResource = null),
         null !== newProps.alternate &&
           null !== newProps.alternate.memoizedState &&
           null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$121 = null;
+          (nextResource = newProps.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
         null !== newProps.memoizedState &&
           null !== newProps.memoizedState.cachePool &&
-          (cache$121 = newProps.memoizedState.cachePool.pool);
-        cache$121 !== type && (newProps.flags |= 2048);
-      }
+          (currentResource = newProps.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (newProps.flags |= 2048));
       renderLanes !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
         renderLanes && (workInProgress.child.flags |= 8192));
@@ -7155,23 +7200,23 @@ function completeWork(current, workInProgress, renderLanes) {
       return bubbleProperties(workInProgress), null;
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$121 = type.rendering;
-      if (null === cache$121)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$121 = findFirstSuspended(current);
-              if (null !== cache$121) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$121.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
@@ -7187,52 +7232,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now$1() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$121)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$121.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now$1() - type.renderingStartTime >
+            2 * now$1() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$121.sibling = workInProgress.child),
-            (workInProgress.child = cache$121))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$121)
-              : (workInProgress.child = cache$121),
-            (type.last = cache$121));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now$1()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now$1()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -7560,8 +7607,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error$138) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$138);
+      } catch (error$139) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$139);
       }
     else ref.current = null;
 }
@@ -7598,7 +7645,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$209) {
+          } catch (e$210) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7865,11 +7912,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) {
         var _finishedWork$memoize = finishedWork.memoizedProps,
           id = _finishedWork$memoize.id;
         _finishedWork$memoize = _finishedWork$memoize.onPostCommit;
-        var commitTime$140 = commitTime,
+        var commitTime$141 = commitTime,
           phase = null === finishedWork.alternate ? "mount" : "update";
         currentUpdateIsNested && (phase = "nested-update");
         "function" === typeof _finishedWork$memoize &&
-          _finishedWork$memoize(id, phase, finishedRoot, commitTime$140);
+          _finishedWork$memoize(id, phase, finishedRoot, commitTime$141);
         finishedWork = finishedWork.return;
         a: for (; null !== finishedWork; ) {
           switch (finishedWork.tag) {
@@ -7896,8 +7943,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$142) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
+    } catch (error$143) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$143);
     }
 }
 function commitClassCallbacks(finishedWork) {
@@ -7996,11 +8043,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
           } else
             try {
               finishedRoot.componentDidMount();
-            } catch (error$143) {
+            } catch (error$144) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$143
+                error$144
               );
             }
         else {
@@ -8017,11 +8064,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                   current,
                   finishedRoot.__reactInternalSnapshotBeforeUpdate
                 );
-            } catch (error$144) {
+            } catch (error$145) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$144
+                error$145
               );
             }
             recordLayoutEffectDuration(finishedWork);
@@ -8032,11 +8079,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
                 current,
                 finishedRoot.__reactInternalSnapshotBeforeUpdate
               );
-            } catch (error$145) {
+            } catch (error$146) {
               captureCommitPhaseError(
                 finishedWork,
                 finishedWork.return,
-                error$145
+                error$146
               );
             }
         }
@@ -8735,22 +8782,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
           try {
             startLayoutEffectTimer(),
               commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$160) {
+          } catch (error$161) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$160
+              error$161
             );
           }
           recordLayoutEffectDuration(finishedWork);
         } else
           try {
             commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-          } catch (error$161) {
+          } catch (error$162) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$161
+              error$162
             );
           }
       }
@@ -8929,11 +8976,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$162) {
+          } catch (error$163) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$162
+              error$163
             );
           }
       break;
@@ -8969,8 +9016,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$163) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$163);
+        } catch (error$164) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$164);
         }
       }
       if (
@@ -8987,8 +9034,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$166) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$166);
+        } catch (error$167) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$167);
         }
       break;
     case 6:
@@ -9001,8 +9048,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$167) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$167);
+        } catch (error$168) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$168);
         }
       }
       break;
@@ -9016,8 +9063,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$168) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$168);
+        } catch (error$169) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$169);
         }
       break;
     case 4:
@@ -9047,8 +9094,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$170) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$170);
+        } catch (error$171) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$171);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -9126,11 +9173,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$150) {
+              } catch (error$151) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$150
+                  error$151
                 );
               }
           } else if (
@@ -9205,21 +9252,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$151 = JSCompiler_inline_result.stateNode;
+            var parent$152 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$151, ""),
+              (setTextContent(parent$152, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$152 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$152, parent$151);
+            var before$153 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$153, parent$152);
             break;
           case 3:
           case 4:
-            var parent$153 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$154 = getHostSibling(finishedWork);
+            var parent$154 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$155 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$154,
-              parent$153
+              before$155,
+              parent$154
             );
             break;
           default:
@@ -9411,8 +9458,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) {
   } else
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
-    } catch (error$176) {
-      captureCommitPhaseError(finishedWork, finishedWork.return, error$176);
+    } catch (error$177) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error$177);
     }
 }
 function commitOffscreenPassiveMountEffects(current, finishedWork, instance) {
@@ -9711,9 +9758,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$181 = finishedWork.stateNode;
+        var instance$182 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$181._visibility & 4
+          ? instance$182._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9726,7 +9773,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$181._visibility |= 4),
+            : ((instance$182._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9734,7 +9781,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$181._visibility |= 4),
+          : ((instance$182._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9747,7 +9794,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$181
+            instance$182
           );
         break;
       case 24:
@@ -9818,8 +9865,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -9828,7 +9876,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -9846,6 +9894,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -10371,16 +10430,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$190 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$191 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$190 &&
-            ((lanes = errorRetryLanes$190),
+          0 !== errorRetryLanes$191 &&
+            ((lanes = errorRetryLanes$191),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$190
+              errorRetryLanes$191
             )));
         }
         if (1 === exitStatus)
@@ -10441,14 +10500,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$190 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$191 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$190 && (errorRetryLanes$190 = index$2);
+            index$2 > errorRetryLanes$191 && (errorRetryLanes$191 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$190;
+          exitStatus = errorRetryLanes$191;
           exitStatus = now$1() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10738,18 +10797,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -10799,6 +10848,20 @@ function handleThrow(root, thrownValue) {
           );
     }
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -10856,8 +10919,8 @@ function renderRootSync(root, lanes) {
         }
       workLoopSync();
       break;
-    } catch (thrownValue$193) {
-      handleThrow(root, thrownValue$193);
+    } catch (thrownValue$194) {
+      handleThrow(root, thrownValue$194);
     }
   while (1);
   resetContextDependencies();
@@ -10974,8 +11037,8 @@ function renderRootConcurrent(root, lanes) {
         }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$195) {
-      handleThrow(root, thrownValue$195);
+    } catch (thrownValue$196) {
+      handleThrow(root, thrownValue$196);
     }
   while (1);
   resetContextDependencies();
@@ -11364,7 +11427,7 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$197 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$198 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
@@ -11372,7 +11435,7 @@ function commitRootImpl(
     enableProfilerNestedUpdateScheduledHook &&
       (rootCommittingMutationOrLayoutEffects = root);
     commitMutationEffects(root, finishedWork, lanes);
-    shouldFireAfterActiveInstanceBlur$197 &&
+    shouldFireAfterActiveInstanceBlur$198 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -11466,7 +11529,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$198 = rootWithPendingPassiveEffects,
+    var root$199 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -11482,7 +11545,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$198, remainingLanes);
+        releaseRootPooledCache(root$199, remainingLanes);
     }
   }
   return !1;
@@ -12738,12 +12801,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$201 = fiber.stateNode;
-      if (root$201.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$201.pendingLanes);
+      var root$202 = fiber.stateNode;
+      if (root$202.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$202.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$201, lanes | 2),
-          ensureRootIsScheduled(root$201, now$1()),
+          (markRootEntangled(root$202, lanes | 2),
+          ensureRootIsScheduled(root$202, now$1()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now$1() + 500),
             flushSyncCallbacks()));
@@ -14017,19 +14080,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$317;
+  var JSCompiler_inline_result$jscomp$320;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1591 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1591) {
-      var element$jscomp$inline_1592 = document.createElement("div");
-      element$jscomp$inline_1592.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1591 =
-        "function" === typeof element$jscomp$inline_1592.oninput;
+    var isSupported$jscomp$inline_1606 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1606) {
+      var element$jscomp$inline_1607 = document.createElement("div");
+      element$jscomp$inline_1607.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1606 =
+        "function" === typeof element$jscomp$inline_1607.oninput;
     }
-    JSCompiler_inline_result$jscomp$317 = isSupported$jscomp$inline_1591;
-  } else JSCompiler_inline_result$jscomp$317 = !1;
+    JSCompiler_inline_result$jscomp$320 = isSupported$jscomp$inline_1606;
+  } else JSCompiler_inline_result$jscomp$320 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$317 &&
+    JSCompiler_inline_result$jscomp$320 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -14338,20 +14401,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1632 = 0;
-  i$jscomp$inline_1632 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1632++
+  var i$jscomp$inline_1647 = 0;
+  i$jscomp$inline_1647 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1647++
 ) {
-  var eventName$jscomp$inline_1633 =
-      simpleEventPluginEvents[i$jscomp$inline_1632],
-    domEventName$jscomp$inline_1634 =
-      eventName$jscomp$inline_1633.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1635 =
-      eventName$jscomp$inline_1633[0].toUpperCase() +
-      eventName$jscomp$inline_1633.slice(1);
+  var eventName$jscomp$inline_1648 =
+      simpleEventPluginEvents[i$jscomp$inline_1647],
+    domEventName$jscomp$inline_1649 =
+      eventName$jscomp$inline_1648.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1650 =
+      eventName$jscomp$inline_1648[0].toUpperCase() +
+      eventName$jscomp$inline_1648.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1634,
-    "on" + capitalizedEvent$jscomp$inline_1635
+    domEventName$jscomp$inline_1649,
+    "on" + capitalizedEvent$jscomp$inline_1650
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15735,14 +15798,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$219 = getStyleKey(href),
+          var key$220 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$219);
+            resource = as.get(key$220);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$219)
+              getStylesheetSelectorFromKey(key$220)
             ))
           )
             state.loading = 1;
@@ -15753,7 +15816,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$219)) &&
+            (options = preloadPropsMap.get(key$220)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15770,6 +15833,7 @@ function preinit$1(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -15778,15 +15842,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$219, resource);
+          as.set(key$220, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$219 = getScriptKey(href)),
-            (precedence = as.get(key$219)),
+            (key$220 = getScriptKey(href)),
+            (precedence = as.get(key$220)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$219
+                "script[async]" + key$220
               )),
               precedence ||
                 ((href = {
@@ -15795,7 +15859,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$219)) &&
+                (options = preloadPropsMap.get(key$220)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15808,13 +15872,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$219, precedence));
+              as.set(key$220, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$219 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$219 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$219 + '"]';
+        key$220 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$220 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$220 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15831,7 +15895,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$219) &&
+          null === resourceRoot.querySelector(key$220) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15864,17 +15928,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$228 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$229 = styles$228.get(type);
-        resource$229 ||
+        var styles$229 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$230 = styles$229.get(type);
+        resource$230 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$229 = {
+          (resource$230 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$228.set(type, resource$229),
+          styles$229.set(type, resource$230),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15889,9 +15953,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$229.state
+              resource$230.state
             ));
-        return resource$229;
+        return resource$230;
       }
       return null;
     case "script":
@@ -15963,35 +16027,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$234 = hoistableRoot.querySelector(
+        var instance$235 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$234)
+        if (instance$235)
           return (
-            (resource.instance = instance$234),
-            markNodeAsHoistable(instance$234),
-            instance$234
+            (resource.instance = instance$235),
+            markNodeAsHoistable(instance$235),
+            instance$235
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$234 = (
+        instance$235 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$234);
-        var linkInstance = instance$234;
+        markNodeAsHoistable(instance$235);
+        var linkInstance = instance$235;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$234, "link", key);
-        insertStylesheet(instance$234, props.precedence, hoistableRoot);
-        return (resource.instance = instance$234);
+        setInitialProperties(instance$235, "link", key);
+        resource.state.loading |= 4;
+        insertStylesheet(instance$235, props.precedence, hoistableRoot);
+        return (resource.instance = instance$235);
       case "script":
-        instance$234 = getScriptKey(props.src);
+        instance$235 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$234
+            "script[async]" + instance$235
           ))
         )
           return (
@@ -16000,7 +16065,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$234)))
+        if ((styleProps = preloadPropsMap.get(instance$235)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -16014,6 +16079,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -16365,10 +16436,10 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1805 = {
+var devToolsConfig$jscomp$inline_1820 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-ef93e10b",
+  version: "18.3.0-www-modern-241587b0",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16386,10 +16457,10 @@ var devToolsConfig$jscomp$inline_1805 = {
   } catch (err) {}
   return hook.checkDCE ? !0 : !1;
 })({
-  bundleType: devToolsConfig$jscomp$inline_1805.bundleType,
-  version: devToolsConfig$jscomp$inline_1805.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1805.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1805.rendererConfig,
+  bundleType: devToolsConfig$jscomp$inline_1820.bundleType,
+  version: devToolsConfig$jscomp$inline_1820.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1820.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1820.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16406,14 +16477,14 @@ var devToolsConfig$jscomp$inline_1805 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1805.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1820.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-ef93e10b"
+  reconcilerVersion: "18.3.0-www-modern-241587b0"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16569,7 +16640,7 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-ef93e10b";
+exports.version = "18.3.0-www-modern-241587b0";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
index bac5baf146..0ba64c6fbe 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -502,11 +502,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -546,8 +547,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -583,7 +584,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -18858,7 +18859,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -18869,24 +18874,42 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
+}
 
-  if (!includesOnlyNonUrgentLanes(renderLanes));
+function preloadResourceAndSuspendIfNeeded(
+  workInProgress,
+  resource,
+  type,
+  props,
+  renderLanes
+) {
+  // This is a fork of preloadInstanceAndSuspendIfNeeded, but for resources.
+  if (!mayResourceSuspendCommit(resource)) {
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  workInProgress.flags |= MaySuspendCommit;
+  var rootRenderLanes = getWorkInProgressRootRenderLanes();
+
+  if (!includesOnlyNonUrgentLanes(rootRenderLanes));
   else {
-    // Preload the instance
-    var isReady = preloadInstance();
+    var isReady = preloadResource(resource);
 
     if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
+      if (shouldRemainOnPreviousScreen()) {
+        workInProgress.flags |= ShouldSuspendCommit;
+      } else {
         suspendCommit();
       }
     }
@@ -19341,58 +19364,74 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostHoistable: {
       {
-        var currentRef = current ? current.ref : null;
+        // The branching here is more complicated than you might expect because
+        // a HostHoistable sometimes corresponds to a Resource and sometimes
+        // corresponds to an Instance. It can also switch during an update.
+        var type = workInProgress.type;
+        var nextResource = workInProgress.memoizedState;
 
-        if (currentRef !== workInProgress.ref) {
-          markRef(workInProgress);
-        }
-
-        var maySuspend = false; // @TODO refactor this block to create the instance here in complete phase if we
-        // are not hydrating.
-
-        if (
+        if (current === null) {
           // We are mounting and must Update this Hoistable in this commit
-          current === null || // We are transitioning to, from, or between Hoistable Resources
-          // and require an update
-          current.memoizedState !== workInProgress.memoizedState
-        ) {
-          if (workInProgress.memoizedState !== null) {
-            maySuspend = mayResourceSuspendCommit(workInProgress.memoizedState);
-          } else {
-            maySuspend = maySuspendCommit();
+          // @TODO refactor this block to create the instance here in complete
+          // phase if we are not hydrating.
+          markUpdate(workInProgress);
+
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
           }
 
-          markUpdate(workInProgress);
-        } else if (workInProgress.memoizedState === null) {
-          maySuspend = maySuspendCommit(); // We may have props to update on the Hoistable instance. We use the
-          // updateHostComponent path becuase it produces the update queue
-          // we need for Hoistables
-
-          updateHostComponent(
-            current,
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps
-          );
-        }
-
-        bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might
-        // throw to suspend, and if the resource immediately loads, the work loop
-        // will resume rendering as if the work-in-progress completed. So it must
-        // fully complete.
-
-        if (maySuspend) {
-          preloadInstanceAndSuspendIfNeeded(
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps,
-            renderLanes
-          );
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
         } else {
-          workInProgress.flags &= ~SuspenseyCommit;
-        }
+          // We are updating.
+          var currentResource = current.memoizedState;
 
-        return null;
+          if (nextResource !== currentResource) {
+            // We are transitioning to, from, or between Hoistable Resources
+            // and require an update
+            markUpdate(workInProgress);
+          }
+
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
+
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+
+            if (nextResource === currentResource) {
+              workInProgress.flags &= ~MaySuspendCommit;
+            } else {
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            }
+
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            //
+            // We may have props to update on the Hoistable instance. We use the
+            // updateHostComponent path becuase it produces the update queue
+            // we need for Hoistables.
+            updateHostComponent(current, workInProgress, type, newProps); // This must come at the very end of the complete phase.
+
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
+        }
       }
     }
     // eslint-disable-next-line-no-fallthrough
@@ -19401,10 +19440,10 @@ function completeWork(current, workInProgress, renderLanes) {
       {
         popHostContext(workInProgress);
         var rootContainerInstance = getRootHostContainer();
-        var type = workInProgress.type;
+        var _type = workInProgress.type;
 
         if (current !== null && workInProgress.stateNode != null) {
-          updateHostComponent(current, workInProgress, type, newProps);
+          updateHostComponent(current, workInProgress, _type, newProps);
 
           if (current.ref !== workInProgress.ref) {
             markRef(workInProgress);
@@ -19436,7 +19475,7 @@ function completeWork(current, workInProgress, renderLanes) {
             instance = workInProgress.stateNode;
           } else {
             instance = resolveSingletonInstance(
-              type,
+              _type,
               newProps,
               rootContainerInstance,
               currentHostContext,
@@ -19460,12 +19499,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -19504,7 +19541,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -19516,7 +19553,7 @@ function completeWork(current, workInProgress, renderLanes) {
           // (eg DOM renderer supports auto-focus for certain elements).
           // Make sure such renderers get scheduled for later work.
 
-          if (finalizeInitialChildren(_instance3, _type, newProps)) {
+          if (finalizeInitialChildren(_instance3, _type2, newProps)) {
             markUpdate(workInProgress);
           }
         }
@@ -19532,17 +19569,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -24282,13 +24309,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -24303,7 +24341,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource(
             // This should always be set by visiting HostRoot first
@@ -24331,10 +24369,33 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
         currentHoistableRoot = getHoistableRoot(container);
         recursivelyAccumulateSuspenseyCommit(fiber);
         currentHoistableRoot = previousHoistableRoot;
-        break;
       }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
     }
-    // eslint-disable-next-line-no-fallthrough
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -26985,15 +27046,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -30451,7 +30521,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-173231f6";
+var ReactVersion = "18.3.0-www-classic-a0e3bd11";
 
 function createPortal$1(
   children,
@@ -40589,6 +40659,7 @@ function preinit(href, options) {
           link.addEventListener("error", function () {
             state.loading |= Errored;
           });
+          state.loading |= Inserted;
           insertStylesheet(_instance, precedence, resourceRoot);
         } // Construct a Resource and cache it
 
@@ -40920,7 +40991,11 @@ function acquireResource(hoistableRoot, resource, props) {
         var ownerDocument = getDocumentFromRoot(hoistableRoot);
         instance = ownerDocument.createElement("style");
         markNodeAsHoistable(instance);
-        setInitialProperties(instance, "style", styleProps);
+        setInitialProperties(instance, "style", styleProps); // TODO: `style` does not have loading state for tracking insertions. I
+        // guess because these aren't suspensey? Not sure whether this is a
+        // factoring smell.
+        // resource.state.loading |= Inserted;
+
         insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
         resource.instance = instance;
         return instance;
@@ -40961,6 +41036,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(_instance3, "link", stylesheetProps);
+        resource.state.loading |= Inserted;
         insertStylesheet(_instance3, _qualifiedProps.precedence, hoistableRoot);
         resource.instance = _instance3;
         return _instance3;
@@ -41017,6 +41093,28 @@ function acquireResource(hoistableRoot, resource, props) {
         );
       }
     }
+  } else {
+    // In the case of stylesheets, they might have already been assigned an
+    // instance during `suspendResource`. But that doesn't mean they were
+    // inserted, because the commit might have been interrupted. So we need to
+    // check now.
+    //
+    // The other resource types are unaffected because they are not
+    // yet suspensey.
+    //
+    // TODO: This is a bit of a code smell. Consider refactoring how
+    // `suspendResource` and `acquireResource` work together. The idea is that
+    // `suspendResource` does all the same stuff as `acquireResource` except
+    // for the insertion.
+    if (
+      resource.type === "stylesheet" &&
+      (resource.state.loading & Inserted) === NotLoaded
+    ) {
+      var _qualifiedProps2 = props;
+      var _instance5 = resource.instance;
+      resource.state.loading |= Inserted;
+      insertStylesheet(_instance5, _qualifiedProps2.precedence, hoistableRoot);
+    }
   }
 
   return resource.instance;
@@ -41464,9 +41562,6 @@ function isHostHoistableType(type, props, hostContext) {
 
   return false;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function mayResourceSuspendCommit(resource) {
   return (
     resource.type === "stylesheet" &&
@@ -41477,6 +41572,17 @@ function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
 }
+function preloadResource(resource) {
+  if (
+    resource.type === "stylesheet" &&
+    (resource.state.loading & Settled) === NotLoaded
+  ) {
+    // we have not finished loading the underlying stylesheet yet.
+    return false;
+  } // Return true to indicate it's already loaded
+
+  return true;
+}
 var suspendedState = null; // We use a noop function when we begin suspending because if possible we want the
 // waitfor step to finish synchronously. If it doesn't we'll return a function to
 // provide the actual unsuspend function and that will get completed when the count
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
index f582bdc5e2..e2b3b4a112 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -319,11 +319,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -363,8 +364,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -400,7 +401,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 // This module only exists as an ESM wrapper around the external CommonJS
 var scheduleCallback$2 = Scheduler.unstable_scheduleCallback;
@@ -22694,7 +22695,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -22705,24 +22710,42 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
+}
 
-  if (!includesOnlyNonUrgentLanes(renderLanes));
+function preloadResourceAndSuspendIfNeeded(
+  workInProgress,
+  resource,
+  type,
+  props,
+  renderLanes
+) {
+  // This is a fork of preloadInstanceAndSuspendIfNeeded, but for resources.
+  if (!mayResourceSuspendCommit(resource)) {
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  }
+
+  workInProgress.flags |= MaySuspendCommit;
+  var rootRenderLanes = getWorkInProgressRootRenderLanes();
+
+  if (!includesOnlyNonUrgentLanes(rootRenderLanes));
   else {
-    // Preload the instance
-    var isReady = preloadInstance();
+    var isReady = preloadResource(resource);
 
     if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
+      if (shouldRemainOnPreviousScreen()) {
+        workInProgress.flags |= ShouldSuspendCommit;
+      } else {
         suspendCommit();
       }
     }
@@ -23170,58 +23193,74 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostHoistable: {
       {
-        var currentRef = current ? current.ref : null;
+        // The branching here is more complicated than you might expect because
+        // a HostHoistable sometimes corresponds to a Resource and sometimes
+        // corresponds to an Instance. It can also switch during an update.
+        var type = workInProgress.type;
+        var nextResource = workInProgress.memoizedState;
 
-        if (currentRef !== workInProgress.ref) {
-          markRef(workInProgress);
-        }
-
-        var maySuspend = false; // @TODO refactor this block to create the instance here in complete phase if we
-        // are not hydrating.
-
-        if (
+        if (current === null) {
           // We are mounting and must Update this Hoistable in this commit
-          current === null || // We are transitioning to, from, or between Hoistable Resources
-          // and require an update
-          current.memoizedState !== workInProgress.memoizedState
-        ) {
-          if (workInProgress.memoizedState !== null) {
-            maySuspend = mayResourceSuspendCommit(workInProgress.memoizedState);
-          } else {
-            maySuspend = maySuspendCommit();
+          // @TODO refactor this block to create the instance here in complete
+          // phase if we are not hydrating.
+          markUpdate(workInProgress);
+
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
           }
 
-          markUpdate(workInProgress);
-        } else if (workInProgress.memoizedState === null) {
-          maySuspend = maySuspendCommit(); // We may have props to update on the Hoistable instance. We use the
-          // updateHostComponent path becuase it produces the update queue
-          // we need for Hoistables
-
-          updateHostComponent(
-            current,
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps
-          );
-        }
-
-        bubbleProperties(workInProgress); // This must come at the very end of the complete phase, because it might
-        // throw to suspend, and if the resource immediately loads, the work loop
-        // will resume rendering as if the work-in-progress completed. So it must
-        // fully complete.
-
-        if (maySuspend) {
-          preloadInstanceAndSuspendIfNeeded(
-            workInProgress,
-            workInProgress.type,
-            workInProgress.pendingProps,
-            renderLanes
-          );
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
         } else {
-          workInProgress.flags &= ~SuspenseyCommit;
-        }
+          // We are updating.
+          var currentResource = current.memoizedState;
 
-        return null;
+          if (nextResource !== currentResource) {
+            // We are transitioning to, from, or between Hoistable Resources
+            // and require an update
+            markUpdate(workInProgress);
+          }
+
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
+
+          if (nextResource !== null) {
+            // This is a Hoistable Resource
+            // This must come at the very end of the complete phase.
+            bubbleProperties(workInProgress);
+
+            if (nextResource === currentResource) {
+              workInProgress.flags &= ~MaySuspendCommit;
+            } else {
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource);
+            }
+
+            return null;
+          } else {
+            // This is a Hoistable Instance
+            //
+            // We may have props to update on the Hoistable instance. We use the
+            // updateHostComponent path becuase it produces the update queue
+            // we need for Hoistables.
+            updateHostComponent(current, workInProgress, type, newProps); // This must come at the very end of the complete phase.
+
+            bubbleProperties(workInProgress);
+            preloadInstanceAndSuspendIfNeeded(workInProgress);
+            return null;
+          }
+        }
       }
     }
     // eslint-disable-next-line-no-fallthrough
@@ -23230,10 +23269,10 @@ function completeWork(current, workInProgress, renderLanes) {
       {
         popHostContext(workInProgress);
         var rootContainerInstance = getRootHostContainer();
-        var type = workInProgress.type;
+        var _type = workInProgress.type;
 
         if (current !== null && workInProgress.stateNode != null) {
-          updateHostComponent(current, workInProgress, type, newProps);
+          updateHostComponent(current, workInProgress, _type, newProps);
 
           if (current.ref !== workInProgress.ref) {
             markRef(workInProgress);
@@ -23265,7 +23304,7 @@ function completeWork(current, workInProgress, renderLanes) {
             instance = workInProgress.stateNode;
           } else {
             instance = resolveSingletonInstance(
-              type,
+              _type,
               newProps,
               rootContainerInstance,
               currentHostContext,
@@ -23289,12 +23328,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -23333,7 +23370,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -23345,7 +23382,7 @@ function completeWork(current, workInProgress, renderLanes) {
           // (eg DOM renderer supports auto-focus for certain elements).
           // Make sure such renderers get scheduled for later work.
 
-          if (finalizeInitialChildren(_instance3, _type, newProps)) {
+          if (finalizeInitialChildren(_instance3, _type2, newProps)) {
             markUpdate(workInProgress);
           }
         }
@@ -23361,17 +23398,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -28089,13 +28116,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -28110,7 +28148,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource(
             // This should always be set by visiting HostRoot first
@@ -28138,10 +28176,33 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
         currentHoistableRoot = getHoistableRoot(container);
         recursivelyAccumulateSuspenseyCommit(fiber);
         currentHoistableRoot = previousHoistableRoot;
-        break;
       }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
     }
-    // eslint-disable-next-line-no-fallthrough
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -30792,15 +30853,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -34258,7 +34328,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-2789db5d";
+var ReactVersion = "18.3.0-www-modern-c961e1cf";
 
 function createPortal$1(
   children,
@@ -43564,6 +43634,7 @@ function preinit$1(href, options) {
           link.addEventListener("error", function () {
             state.loading |= Errored;
           });
+          state.loading |= Inserted;
           insertStylesheet(_instance, precedence, resourceRoot);
         } // Construct a Resource and cache it
 
@@ -43895,7 +43966,11 @@ function acquireResource(hoistableRoot, resource, props) {
         var ownerDocument = getDocumentFromRoot(hoistableRoot);
         instance = ownerDocument.createElement("style");
         markNodeAsHoistable(instance);
-        setInitialProperties(instance, "style", styleProps);
+        setInitialProperties(instance, "style", styleProps); // TODO: `style` does not have loading state for tracking insertions. I
+        // guess because these aren't suspensey? Not sure whether this is a
+        // factoring smell.
+        // resource.state.loading |= Inserted;
+
         insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
         resource.instance = instance;
         return instance;
@@ -43936,6 +44011,7 @@ function acquireResource(hoistableRoot, resource, props) {
           linkInstance.onerror = reject;
         });
         setInitialProperties(_instance3, "link", stylesheetProps);
+        resource.state.loading |= Inserted;
         insertStylesheet(_instance3, _qualifiedProps.precedence, hoistableRoot);
         resource.instance = _instance3;
         return _instance3;
@@ -43992,6 +44068,28 @@ function acquireResource(hoistableRoot, resource, props) {
         );
       }
     }
+  } else {
+    // In the case of stylesheets, they might have already been assigned an
+    // instance during `suspendResource`. But that doesn't mean they were
+    // inserted, because the commit might have been interrupted. So we need to
+    // check now.
+    //
+    // The other resource types are unaffected because they are not
+    // yet suspensey.
+    //
+    // TODO: This is a bit of a code smell. Consider refactoring how
+    // `suspendResource` and `acquireResource` work together. The idea is that
+    // `suspendResource` does all the same stuff as `acquireResource` except
+    // for the insertion.
+    if (
+      resource.type === "stylesheet" &&
+      (resource.state.loading & Inserted) === NotLoaded
+    ) {
+      var _qualifiedProps2 = props;
+      var _instance5 = resource.instance;
+      resource.state.loading |= Inserted;
+      insertStylesheet(_instance5, _qualifiedProps2.precedence, hoistableRoot);
+    }
   }
 
   return resource.instance;
@@ -44439,9 +44537,6 @@ function isHostHoistableType(type, props, hostContext) {
 
   return false;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function mayResourceSuspendCommit(resource) {
   return (
     resource.type === "stylesheet" &&
@@ -44452,6 +44547,17 @@ function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
 }
+function preloadResource(resource) {
+  if (
+    resource.type === "stylesheet" &&
+    (resource.state.loading & Settled) === NotLoaded
+  ) {
+    // we have not finished loading the underlying stylesheet yet.
+    return false;
+  } // Return true to indicate it's already loaded
+
+  return true;
+}
 var suspendedState = null; // We use a noop function when we begin suspending because if possible we want the
 // waitfor step to finish synchronously. If it doesn't we'll return a function to
 // provide the actual unsuspend function and that will get completed when the count
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
index e8572b1f9c..b651ed5b5b 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -5846,6 +5846,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -5925,13 +5944,13 @@ function completeWork(current, workInProgress, renderLanes) {
         null
       );
     case 3:
-      renderLanes = workInProgress.stateNode;
+      newProps = workInProgress.stateNode;
       enableTransitionTracing &&
         null !== workInProgressTransitions &&
         (workInProgress.flags |= 2048);
-      newProps = null;
-      null !== current && (newProps = current.memoizedState.cache);
-      workInProgress.memoizedState.cache !== newProps &&
+      renderLanes = null;
+      null !== current && (renderLanes = current.memoizedState.cache);
+      workInProgress.memoizedState.cache !== renderLanes &&
         (workInProgress.flags |= 2048);
       popProvider(CacheContext);
       enableTransitionTracing &&
@@ -5942,9 +5961,9 @@ function completeWork(current, workInProgress, renderLanes) {
       pop(didPerformWorkStackCursor);
       pop(contextStackCursor);
       resetWorkInProgressVersions();
-      renderLanes.pendingContext &&
-        ((renderLanes.context = renderLanes.pendingContext),
-        (renderLanes.pendingContext = null));
+      newProps.pendingContext &&
+        ((newProps.context = newProps.pendingContext),
+        (newProps.pendingContext = null));
       if (null === current || null === current.child)
         popHydrationState(workInProgress)
           ? markUpdate(workInProgress)
@@ -5961,39 +5980,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -6005,7 +6026,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor$1.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -6030,64 +6055,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -6120,25 +6162,25 @@ function completeWork(current, workInProgress, renderLanes) {
           throw Error(formatProdErrorMessage(166));
         current = rootInstanceStackCursor.current;
         if (popHydrationState(workInProgress)) {
-          newProps = workInProgress.stateNode;
+          renderLanes = workInProgress.stateNode;
           current = workInProgress.memoizedProps;
-          newProps[internalInstanceKey] = workInProgress;
-          if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+          renderLanes[internalInstanceKey] = workInProgress;
+          if ((newProps = renderLanes.nodeValue !== current))
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
-                  newProps = newProps.nodeValue;
+                  renderLanes = renderLanes.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
-                  normalizeMarkupForTextOrAttribute(newProps);
+                  normalizeMarkupForTextOrAttribute(renderLanes);
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
-                    ((newProps = newProps.nodeValue),
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
+                    ((renderLanes = renderLanes.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
-                    normalizeMarkupForTextOrAttribute(newProps));
+                    normalizeMarkupForTextOrAttribute(renderLanes));
               }
-          renderLanes && markUpdate(workInProgress);
+          newProps && markUpdate(workInProgress);
         } else
           (current =
             getOwnerDocumentFromRootContainer(current).createTextNode(
@@ -6166,50 +6208,51 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
                 (workInProgress.memoizedState = null),
               (workInProgress.flags |= 4);
           bubbleProperties(workInProgress);
-          type = !1;
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
-      renderLanes = null !== newProps;
+      newProps = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
-        null !== newProps.alternate &&
-          null !== newProps.alternate.memoizedState &&
-          null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$106 = null;
-        null !== newProps.memoizedState &&
-          null !== newProps.memoizedState.cachePool &&
-          (cache$106 = newProps.memoizedState.cachePool.pool);
-        cache$106 !== type && (newProps.flags |= 2048);
-      }
-      renderLanes !== current &&
+      newProps &&
+        ((renderLanes = workInProgress.child),
+        (nextResource = null),
+        null !== renderLanes.alternate &&
+          null !== renderLanes.alternate.memoizedState &&
+          null !== renderLanes.alternate.memoizedState.cachePool &&
+          (nextResource = renderLanes.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
+        null !== renderLanes.memoizedState &&
+          null !== renderLanes.memoizedState.cachePool &&
+          (currentResource = renderLanes.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (renderLanes.flags |= 2048));
+      newProps !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
-        renderLanes && (workInProgress.child.flags |= 8192));
+        newProps && (workInProgress.child.flags |= 8192));
       scheduleRetryEffect(workInProgress, workInProgress.updateQueue);
       null !== workInProgress.updateQueue &&
         null != workInProgress.memoizedProps.suspenseCallback &&
@@ -6238,30 +6281,30 @@ function completeWork(current, workInProgress, renderLanes) {
       );
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$106 = type.rendering;
-      if (null === cache$106)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$106 = findFirstSuspended(current);
-              if (null !== cache$106) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$106.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
                 current = renderLanes;
-                for (renderLanes = workInProgress.child; null !== renderLanes; )
-                  resetWorkInProgress(renderLanes, current),
-                    (renderLanes = renderLanes.sibling);
+                for (newProps = workInProgress.child; null !== newProps; )
+                  resetWorkInProgress(newProps, current),
+                    (newProps = newProps.sibling);
                 push(
                   suspenseStackCursor,
                   (suspenseStackCursor.current & 1) | 2
@@ -6270,52 +6313,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$106)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$106.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now() - type.renderingStartTime >
+            2 * now() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$106.sibling = workInProgress.child),
-            (workInProgress.child = cache$106))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$106)
-              : (workInProgress.child = cache$106),
-            (type.last = cache$106));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -6360,27 +6405,27 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.subtreeFlags & 6 &&
               (workInProgress.flags |= 8192))
           : bubbleProperties(workInProgress),
-        (renderLanes = workInProgress.updateQueue),
-        null !== renderLanes &&
-          scheduleRetryEffect(workInProgress, renderLanes.retryQueue),
-        (renderLanes = null),
+        (newProps = workInProgress.updateQueue),
+        null !== newProps &&
+          scheduleRetryEffect(workInProgress, newProps.retryQueue),
+        (newProps = null),
         null !== current &&
           null !== current.memoizedState &&
           null !== current.memoizedState.cachePool &&
-          (renderLanes = current.memoizedState.cachePool.pool),
-        (newProps = null),
+          (newProps = current.memoizedState.cachePool.pool),
+        (renderLanes = null),
         null !== workInProgress.memoizedState &&
           null !== workInProgress.memoizedState.cachePool &&
-          (newProps = workInProgress.memoizedState.cachePool.pool),
-        newProps !== renderLanes && (workInProgress.flags |= 2048),
+          (renderLanes = workInProgress.memoizedState.cachePool.pool),
+        renderLanes !== newProps && (workInProgress.flags |= 2048),
         popTransition(workInProgress, current),
         null
       );
     case 24:
       return (
-        (renderLanes = null),
-        null !== current && (renderLanes = current.memoizedState.cache),
-        workInProgress.memoizedState.cache !== renderLanes &&
+        (newProps = null),
+        null !== current && (newProps = current.memoizedState.cache),
+        workInProgress.memoizedState.cache !== newProps &&
           (workInProgress.flags |= 2048),
         popProvider(CacheContext),
         bubbleProperties(workInProgress),
@@ -6609,8 +6654,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$124) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$124);
+      } catch (error$125) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$125);
       }
     else ref.current = null;
 }
@@ -6910,11 +6955,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$126) {
+          } catch (error$127) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$126
+              error$127
             );
           }
         }
@@ -7588,8 +7633,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$139) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$139);
+        } catch (error$140) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$140);
         }
       }
       break;
@@ -7767,11 +7812,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$140) {
+          } catch (error$141) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$140
+              error$141
             );
           }
       break;
@@ -7807,8 +7852,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$141) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$141);
+        } catch (error$142) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
         }
       }
       if (
@@ -7825,8 +7870,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$144) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
+        } catch (error$145) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
         }
       break;
     case 6:
@@ -7839,8 +7884,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$145) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
+        } catch (error$146) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
         }
       }
       break;
@@ -7854,8 +7899,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$146) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$146);
+        } catch (error$147) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
         }
       break;
     case 4:
@@ -7885,8 +7930,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$149) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -7964,11 +8009,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$129) {
+              } catch (error$130) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$129
+                  error$130
                 );
               }
           } else if (
@@ -8043,21 +8088,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$130 = JSCompiler_inline_result.stateNode;
+            var parent$131 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$130, ""),
+              (setTextContent(parent$131, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$131 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$131, parent$130);
+            var before$132 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$132, parent$131);
             break;
           case 3:
           case 4:
-            var parent$132 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$133 = getHostSibling(finishedWork);
+            var parent$133 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$134 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$133,
-              parent$132
+              before$134,
+              parent$133
             );
             break;
           default:
@@ -8527,9 +8572,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$158 = finishedWork.stateNode;
+        var instance$159 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$158._visibility & 4
+          ? instance$159._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8542,7 +8587,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$158._visibility |= 4),
+            : ((instance$159._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -8550,7 +8595,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$158._visibility |= 4),
+          : ((instance$159._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -8563,7 +8608,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$158
+            instance$159
           );
         break;
       case 24:
@@ -8634,8 +8679,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -8644,7 +8690,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -8662,6 +8708,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -9335,16 +9392,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$168 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$169 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$168 &&
-            ((lanes = errorRetryLanes$168),
+          0 !== errorRetryLanes$169 &&
+            ((lanes = errorRetryLanes$169),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$168
+              errorRetryLanes$169
             )));
         }
         if (1 === exitStatus)
@@ -9405,14 +9462,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$168 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$169 = -1; 0 < exitStatus; ) {
             var index$2 = 31 - clz32(exitStatus),
               lane = 1 << index$2;
             index$2 = errorRetryLanes[index$2];
-            index$2 > errorRetryLanes$168 && (errorRetryLanes$168 = index$2);
+            index$2 > errorRetryLanes$169 && (errorRetryLanes$169 = index$2);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$168;
+          exitStatus = errorRetryLanes$169;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -9700,18 +9757,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -9732,6 +9779,20 @@ function handleThrow(root, thrownValue) {
     ((workInProgressRootExitStatus = 1),
     (workInProgressRootFatalError = thrownValue));
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -9779,8 +9840,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$171) {
-      handleThrow(root, thrownValue$171);
+    } catch (thrownValue$172) {
+      handleThrow(root, thrownValue$172);
     }
   while (1);
   resetContextDependencies();
@@ -9886,8 +9947,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$173) {
-      handleThrow(root, thrownValue$173);
+    } catch (thrownValue$174) {
+      handleThrow(root, thrownValue$174);
     }
   while (1);
   resetContextDependencies();
@@ -10242,12 +10303,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$175 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$176 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$175 &&
+    shouldFireAfterActiveInstanceBlur$176 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -10326,7 +10387,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$176 = rootWithPendingPassiveEffects,
+    var root$177 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -10342,7 +10403,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$176, remainingLanes);
+        releaseRootPooledCache(root$177, remainingLanes);
     }
   }
   return !1;
@@ -11649,12 +11710,12 @@ function getPublicRootInstance(container) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$178 = fiber.stateNode;
-      if (root$178.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$178.pendingLanes);
+      var root$179 = fiber.stateNode;
+      if (root$179.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$179.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$178, lanes | 2),
-          ensureRootIsScheduled(root$178, now()),
+          (markRootEntangled(root$179, lanes | 2),
+          ensureRootIsScheduled(root$179, now()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncCallbacks()));
@@ -11773,11 +11834,11 @@ function legacyCreateRootFromDOMContainer(
     if ("function" === typeof callback) {
       var originalCallback = callback;
       callback = function () {
-        var instance = getPublicRootInstance(root$179);
+        var instance = getPublicRootInstance(root$180);
         originalCallback.call(instance);
       };
     }
-    var root$179 = createHydrationContainer(
+    var root$180 = createHydrationContainer(
       initialChildren,
       callback,
       container,
@@ -11789,23 +11850,23 @@ function legacyCreateRootFromDOMContainer(
       noopOnRecoverableError,
       null
     );
-    container._reactRootContainer = root$179;
-    container[internalContainerInstanceKey] = root$179.current;
+    container._reactRootContainer = root$180;
+    container[internalContainerInstanceKey] = root$180.current;
     listenToAllSupportedEvents(
       8 === container.nodeType ? container.parentNode : container
     );
     flushSync$1();
-    return root$179;
+    return root$180;
   }
   clearContainer(container);
   if ("function" === typeof callback) {
-    var originalCallback$180 = callback;
+    var originalCallback$181 = callback;
     callback = function () {
-      var instance = getPublicRootInstance(root$181);
-      originalCallback$180.call(instance);
+      var instance = getPublicRootInstance(root$182);
+      originalCallback$181.call(instance);
     };
   }
-  var root$181 = createFiberRoot(
+  var root$182 = createFiberRoot(
     container,
     0,
     !1,
@@ -11817,15 +11878,15 @@ function legacyCreateRootFromDOMContainer(
     noopOnRecoverableError,
     null
   );
-  container._reactRootContainer = root$181;
-  container[internalContainerInstanceKey] = root$181.current;
+  container._reactRootContainer = root$182;
+  container[internalContainerInstanceKey] = root$182.current;
   listenToAllSupportedEvents(
     8 === container.nodeType ? container.parentNode : container
   );
   flushSync$1(function () {
-    updateContainer(initialChildren, root$181, parentComponent, callback);
+    updateContainer(initialChildren, root$182, parentComponent, callback);
   });
-  return root$181;
+  return root$182;
 }
 function legacyRenderSubtreeIntoContainer(
   parentComponent,
@@ -12929,17 +12990,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1596 = {
+var devToolsConfig$jscomp$inline_1611 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-dfeb256e",
+  version: "18.3.0-www-classic-e4add0e3",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2142 = {
-  bundleType: devToolsConfig$jscomp$inline_1596.bundleType,
-  version: devToolsConfig$jscomp$inline_1596.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1596.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1596.rendererConfig,
+var internals$jscomp$inline_2154 = {
+  bundleType: devToolsConfig$jscomp$inline_1611.bundleType,
+  version: devToolsConfig$jscomp$inline_1611.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1611.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1611.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -12955,26 +13016,26 @@ var internals$jscomp$inline_2142 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1596.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1611.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-dfeb256e"
+  reconcilerVersion: "18.3.0-www-classic-e4add0e3"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2143 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2143.isDisabled &&
-    hook$jscomp$inline_2143.supportsFiber
+    !hook$jscomp$inline_2155.isDisabled &&
+    hook$jscomp$inline_2155.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2143.inject(
-        internals$jscomp$inline_2142
+      (rendererID = hook$jscomp$inline_2155.inject(
+        internals$jscomp$inline_2154
       )),
-        (injectedHook = hook$jscomp$inline_2143);
+        (injectedHook = hook$jscomp$inline_2155);
     } catch (err) {}
 }
 var tagToRoleMappings = {
@@ -13614,14 +13675,14 @@ function preinit(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$189 = getStyleKey(href),
+          var key$190 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$189);
+            resource = as.get(key$190);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$189)
+              getStylesheetSelectorFromKey(key$190)
             ))
           )
             state.loading = 1;
@@ -13632,7 +13693,7 @@ function preinit(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$189)) &&
+            (options = preloadPropsMap.get(key$190)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -13649,6 +13710,7 @@ function preinit(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -13657,15 +13719,15 @@ function preinit(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$189, resource);
+          as.set(key$190, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$189 = getScriptKey(href)),
-            (precedence = as.get(key$189)),
+            (key$190 = getScriptKey(href)),
+            (precedence = as.get(key$190)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$189
+                "script[async]" + key$190
               )),
               precedence ||
                 ((href = {
@@ -13674,7 +13736,7 @@ function preinit(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$189)) &&
+                (options = preloadPropsMap.get(key$190)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -13687,13 +13749,13 @@ function preinit(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$189, precedence));
+              as.set(key$190, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$189 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$189 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$189 + '"]';
+        key$190 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$190 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$190 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -13710,7 +13772,7 @@ function preinit(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$189) &&
+          null === resourceRoot.querySelector(key$190) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -13743,17 +13805,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$198 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$199 = styles$198.get(type);
-        resource$199 ||
+        var styles$199 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$200 = styles$199.get(type);
+        resource$200 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$199 = {
+          (resource$200 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$198.set(type, resource$199),
+          styles$199.set(type, resource$200),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -13768,9 +13830,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$199.state
+              resource$200.state
             ));
-        return resource$199;
+        return resource$200;
       }
       return null;
     case "script":
@@ -13842,35 +13904,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$204 = hoistableRoot.querySelector(
+        var instance$205 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$204)
+        if (instance$205)
           return (
-            (resource.instance = instance$204),
-            markNodeAsHoistable(instance$204),
-            instance$204
+            (resource.instance = instance$205),
+            markNodeAsHoistable(instance$205),
+            instance$205
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$204 = (
+        instance$205 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$204);
-        var linkInstance = instance$204;
+        markNodeAsHoistable(instance$205);
+        var linkInstance = instance$205;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$204, "link", key);
-        insertStylesheet(instance$204, props.precedence, hoistableRoot);
-        return (resource.instance = instance$204);
+        setInitialProperties(instance$205, "link", key);
+        resource.state.loading |= 4;
+        insertStylesheet(instance$205, props.precedence, hoistableRoot);
+        return (resource.instance = instance$205);
       case "script":
-        instance$204 = getScriptKey(props.src);
+        instance$205 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$204
+            "script[async]" + instance$205
           ))
         )
           return (
@@ -13879,7 +13942,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$204)))
+        if ((styleProps = preloadPropsMap.get(instance$205)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -13893,6 +13956,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -14786,19 +14855,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$322;
+  var JSCompiler_inline_result$jscomp$326;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1695 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1695) {
-      var element$jscomp$inline_1696 = document.createElement("div");
-      element$jscomp$inline_1696.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1695 =
-        "function" === typeof element$jscomp$inline_1696.oninput;
+    var isSupported$jscomp$inline_1710 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1710) {
+      var element$jscomp$inline_1711 = document.createElement("div");
+      element$jscomp$inline_1711.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1710 =
+        "function" === typeof element$jscomp$inline_1711.oninput;
     }
-    JSCompiler_inline_result$jscomp$322 = isSupported$jscomp$inline_1695;
-  } else JSCompiler_inline_result$jscomp$322 = !1;
+    JSCompiler_inline_result$jscomp$326 = isSupported$jscomp$inline_1710;
+  } else JSCompiler_inline_result$jscomp$326 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$322 &&
+    JSCompiler_inline_result$jscomp$326 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -14936,20 +15005,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1708 = 0;
-  i$jscomp$inline_1708 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1708++
+  var i$jscomp$inline_1723 = 0;
+  i$jscomp$inline_1723 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1723++
 ) {
-  var eventName$jscomp$inline_1709 =
-      simpleEventPluginEvents[i$jscomp$inline_1708],
-    domEventName$jscomp$inline_1710 =
-      eventName$jscomp$inline_1709.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1711 =
-      eventName$jscomp$inline_1709[0].toUpperCase() +
-      eventName$jscomp$inline_1709.slice(1);
+  var eventName$jscomp$inline_1724 =
+      simpleEventPluginEvents[i$jscomp$inline_1723],
+    domEventName$jscomp$inline_1725 =
+      eventName$jscomp$inline_1724.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1726 =
+      eventName$jscomp$inline_1724[0].toUpperCase() +
+      eventName$jscomp$inline_1724.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1710,
-    "on" + capitalizedEvent$jscomp$inline_1711
+    domEventName$jscomp$inline_1725,
+    "on" + capitalizedEvent$jscomp$inline_1726
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -16826,4 +16895,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-dfeb256e";
+exports.version = "18.3.0-www-classic-e4add0e3";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
index 978173649a..1040f51469 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -6617,6 +6617,25 @@ function updateHostComponent(current, workInProgress, type, newProps) {
       markUpdate(workInProgress);
   }
 }
+function preloadResourceAndSuspendIfNeeded(workInProgress, resource) {
+  if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4))
+    workInProgress.flags &= -16777217;
+  else if (
+    ((workInProgress.flags |= 16777216),
+    0 === (workInProgressRootRenderLanes & 42) &&
+      ((resource =
+        "stylesheet" === resource.type && 0 === (resource.state.loading & 3)
+          ? !1
+          : !0),
+      !resource))
+  )
+    if (shouldRemainOnPreviousScreen()) workInProgress.flags |= 8192;
+    else
+      throw (
+        ((suspendedThenable = noopSuspenseyCommitThenable),
+        SuspenseyCommitException)
+      );
+}
 function scheduleRetryEffect(workInProgress, retryQueue) {
   null !== retryQueue
     ? (workInProgress.flags |= 4)
@@ -6692,13 +6711,13 @@ function completeWork(current, workInProgress, renderLanes) {
     case 1:
       return bubbleProperties(workInProgress), null;
     case 3:
-      renderLanes = workInProgress.stateNode;
+      newProps = workInProgress.stateNode;
       enableTransitionTracing &&
         null !== workInProgressTransitions &&
         (workInProgress.flags |= 2048);
-      newProps = null;
-      null !== current && (newProps = current.memoizedState.cache);
-      workInProgress.memoizedState.cache !== newProps &&
+      renderLanes = null;
+      null !== current && (renderLanes = current.memoizedState.cache);
+      workInProgress.memoizedState.cache !== renderLanes &&
         (workInProgress.flags |= 2048);
       popProvider(CacheContext);
       enableTransitionTracing &&
@@ -6707,9 +6726,9 @@ function completeWork(current, workInProgress, renderLanes) {
       enableTransitionTracing && pop(transitionStack);
       popHostContainer();
       resetWorkInProgressVersions();
-      renderLanes.pendingContext &&
-        ((renderLanes.context = renderLanes.pendingContext),
-        (renderLanes.pendingContext = null));
+      newProps.pendingContext &&
+        ((newProps.context = newProps.pendingContext),
+        (newProps.pendingContext = null));
       if (null === current || null === current.child)
         popHydrationState(workInProgress)
           ? markUpdate(workInProgress)
@@ -6726,39 +6745,41 @@ function completeWork(current, workInProgress, renderLanes) {
         (workInProgress.flags |= 2048);
       return null;
     case 26:
-      return (
-        (current ? current.ref : null) !== workInProgress.ref &&
-          markRef(workInProgress),
-        (renderLanes = !1),
-        null === current ||
-        current.memoizedState !== workInProgress.memoizedState
-          ? (null !== workInProgress.memoizedState
-              ? ((current = workInProgress.memoizedState),
-                (renderLanes =
-                  "stylesheet" === current.type &&
-                  0 === (current.state.loading & 4)))
-              : (renderLanes = !1),
-            markUpdate(workInProgress))
-          : null === workInProgress.memoizedState &&
-            ((renderLanes = !1),
-            updateHostComponent(
+      renderLanes = workInProgress.type;
+      var nextResource = workInProgress.memoizedState;
+      if (null === current)
+        markUpdate(workInProgress),
+          null !== workInProgress.ref && markRef(workInProgress),
+          null !== nextResource
+            ? (bubbleProperties(workInProgress),
+              preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+            : (bubbleProperties(workInProgress),
+              (workInProgress.flags &= -16777217));
+      else {
+        var currentResource = current.memoizedState;
+        nextResource !== currentResource && markUpdate(workInProgress);
+        current.ref !== workInProgress.ref && markRef(workInProgress);
+        null !== nextResource
+          ? (bubbleProperties(workInProgress),
+            nextResource === currentResource
+              ? (workInProgress.flags &= -16777217)
+              : preloadResourceAndSuspendIfNeeded(workInProgress, nextResource))
+          : (updateHostComponent(
               current,
               workInProgress,
-              workInProgress.type,
-              workInProgress.pendingProps
-            )),
-        bubbleProperties(workInProgress),
-        (workInProgress.flags = renderLanes
-          ? workInProgress.flags | 16777216
-          : workInProgress.flags & -16777217),
-        null
-      );
+              renderLanes,
+              newProps
+            ),
+            bubbleProperties(workInProgress),
+            (workInProgress.flags &= -16777217));
+      }
+      return null;
     case 27:
       popHostContext(workInProgress);
       renderLanes = rootInstanceStackCursor.current;
-      var type = workInProgress.type;
+      nextResource = workInProgress.type;
       if (null !== current && null != workInProgress.stateNode)
-        updateHostComponent(current, workInProgress, type, newProps),
+        updateHostComponent(current, workInProgress, nextResource, newProps),
           current.ref !== workInProgress.ref && markRef(workInProgress);
       else {
         if (!newProps) {
@@ -6770,7 +6791,11 @@ function completeWork(current, workInProgress, renderLanes) {
         current = contextStackCursor.current;
         popHydrationState(workInProgress)
           ? prepareToHydrateHostInstance(workInProgress, current)
-          : ((current = resolveSingletonInstance(type, newProps, renderLanes)),
+          : ((current = resolveSingletonInstance(
+              nextResource,
+              newProps,
+              renderLanes
+            )),
             (workInProgress.stateNode = current),
             markUpdate(workInProgress));
         null !== workInProgress.ref && markRef(workInProgress);
@@ -6795,64 +6820,81 @@ function completeWork(current, workInProgress, renderLanes) {
           prepareToHydrateHostInstance(workInProgress, current) &&
             markUpdate(workInProgress);
         else {
-          type = getOwnerDocumentFromRootContainer(
+          nextResource = getOwnerDocumentFromRootContainer(
             rootInstanceStackCursor.current
           );
           switch (current) {
             case "http://www.w3.org/2000/svg":
             case "http://www.w3.org/1998/Math/MathML":
-              current = type.createElementNS(current, renderLanes);
+              current = nextResource.createElementNS(current, renderLanes);
               break;
             default:
               switch (renderLanes) {
                 case "svg":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/2000/svg",
                     renderLanes
                   );
                   break;
                 case "math":
-                  current = type.createElementNS(
+                  current = nextResource.createElementNS(
                     "http://www.w3.org/1998/Math/MathML",
                     renderLanes
                   );
                   break;
                 case "script":
-                  current = type.createElement("div");
+                  current = nextResource.createElement("div");
                   current.innerHTML = "<script>\x3c/script>";
                   current = current.removeChild(current.firstChild);
                   break;
                 case "select":
                   current =
                     "string" === typeof newProps.is
-                      ? type.createElement("select", { is: newProps.is })
-                      : type.createElement("select");
+                      ? nextResource.createElement("select", {
+                          is: newProps.is
+                        })
+                      : nextResource.createElement("select");
                   newProps.multiple
                     ? (current.multiple = !0)
                     : newProps.size && (current.size = newProps.size);
                   break;
                 default:
-                  current = createHTMLElement(renderLanes, newProps, type);
+                  current = createHTMLElement(
+                    renderLanes,
+                    newProps,
+                    nextResource
+                  );
               }
           }
           current[internalInstanceKey] = workInProgress;
           current[internalPropsKey] = newProps;
-          a: for (type = workInProgress.child; null !== type; ) {
-            if (5 === type.tag || 6 === type.tag)
-              current.appendChild(type.stateNode);
-            else if (4 !== type.tag && 27 !== type.tag && null !== type.child) {
-              type.child.return = type;
-              type = type.child;
+          a: for (
+            nextResource = workInProgress.child;
+            null !== nextResource;
+
+          ) {
+            if (5 === nextResource.tag || 6 === nextResource.tag)
+              current.appendChild(nextResource.stateNode);
+            else if (
+              4 !== nextResource.tag &&
+              27 !== nextResource.tag &&
+              null !== nextResource.child
+            ) {
+              nextResource.child.return = nextResource;
+              nextResource = nextResource.child;
               continue;
             }
-            if (type === workInProgress) break a;
-            for (; null === type.sibling; ) {
-              if (null === type.return || type.return === workInProgress)
+            if (nextResource === workInProgress) break a;
+            for (; null === nextResource.sibling; ) {
+              if (
+                null === nextResource.return ||
+                nextResource.return === workInProgress
+              )
                 break a;
-              type = type.return;
+              nextResource = nextResource.return;
             }
-            type.sibling.return = type.return;
-            type = type.sibling;
+            nextResource.sibling.return = nextResource.return;
+            nextResource = nextResource.sibling;
           }
           workInProgress.stateNode = current;
           a: switch (
@@ -6885,25 +6927,25 @@ function completeWork(current, workInProgress, renderLanes) {
           throw Error(formatProdErrorMessage(166));
         current = rootInstanceStackCursor.current;
         if (popHydrationState(workInProgress)) {
-          newProps = workInProgress.stateNode;
+          renderLanes = workInProgress.stateNode;
           current = workInProgress.memoizedProps;
-          newProps[internalInstanceKey] = workInProgress;
-          if ((renderLanes = newProps.nodeValue !== current))
-            if (((type = hydrationParentFiber), null !== type))
-              switch (type.tag) {
+          renderLanes[internalInstanceKey] = workInProgress;
+          if ((newProps = renderLanes.nodeValue !== current))
+            if (((nextResource = hydrationParentFiber), null !== nextResource))
+              switch (nextResource.tag) {
                 case 3:
-                  newProps = newProps.nodeValue;
+                  renderLanes = renderLanes.nodeValue;
                   normalizeMarkupForTextOrAttribute(current);
-                  normalizeMarkupForTextOrAttribute(newProps);
+                  normalizeMarkupForTextOrAttribute(renderLanes);
                   break;
                 case 27:
                 case 5:
-                  !0 !== type.memoizedProps.suppressHydrationWarning &&
-                    ((newProps = newProps.nodeValue),
+                  !0 !== nextResource.memoizedProps.suppressHydrationWarning &&
+                    ((renderLanes = renderLanes.nodeValue),
                     normalizeMarkupForTextOrAttribute(current),
-                    normalizeMarkupForTextOrAttribute(newProps));
+                    normalizeMarkupForTextOrAttribute(renderLanes));
               }
-          renderLanes && markUpdate(workInProgress);
+          newProps && markUpdate(workInProgress);
         } else
           (current =
             getOwnerDocumentFromRootContainer(current).createTextNode(
@@ -6931,50 +6973,51 @@ function completeWork(current, workInProgress, renderLanes) {
           warnIfUnhydratedTailNodes(),
             resetHydrationState(),
             (workInProgress.flags |= 384),
-            (type = !1);
+            (nextResource = !1);
         else if (
-          ((type = popHydrationState(workInProgress)),
+          ((nextResource = popHydrationState(workInProgress)),
           null !== newProps && null !== newProps.dehydrated)
         ) {
           if (null === current) {
-            if (!type) throw Error(formatProdErrorMessage(318));
-            type = workInProgress.memoizedState;
-            type = null !== type ? type.dehydrated : null;
-            if (!type) throw Error(formatProdErrorMessage(317));
-            type[internalInstanceKey] = workInProgress;
+            if (!nextResource) throw Error(formatProdErrorMessage(318));
+            nextResource = workInProgress.memoizedState;
+            nextResource =
+              null !== nextResource ? nextResource.dehydrated : null;
+            if (!nextResource) throw Error(formatProdErrorMessage(317));
+            nextResource[internalInstanceKey] = workInProgress;
           } else
             resetHydrationState(),
               0 === (workInProgress.flags & 128) &&
                 (workInProgress.memoizedState = null),
               (workInProgress.flags |= 4);
           bubbleProperties(workInProgress);
-          type = !1;
+          nextResource = !1;
         } else
           null !== hydrationErrors &&
             (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)),
-            (type = !0);
-        if (!type) return workInProgress.flags & 256 ? workInProgress : null;
+            (nextResource = !0);
+        if (!nextResource)
+          return workInProgress.flags & 256 ? workInProgress : null;
       }
       if (0 !== (workInProgress.flags & 128))
         return (workInProgress.lanes = renderLanes), workInProgress;
-      renderLanes = null !== newProps;
+      newProps = null !== newProps;
       current = null !== current && null !== current.memoizedState;
-      if (renderLanes) {
-        newProps = workInProgress.child;
-        type = null;
-        null !== newProps.alternate &&
-          null !== newProps.alternate.memoizedState &&
-          null !== newProps.alternate.memoizedState.cachePool &&
-          (type = newProps.alternate.memoizedState.cachePool.pool);
-        var cache$110 = null;
-        null !== newProps.memoizedState &&
-          null !== newProps.memoizedState.cachePool &&
-          (cache$110 = newProps.memoizedState.cachePool.pool);
-        cache$110 !== type && (newProps.flags |= 2048);
-      }
-      renderLanes !== current &&
+      newProps &&
+        ((renderLanes = workInProgress.child),
+        (nextResource = null),
+        null !== renderLanes.alternate &&
+          null !== renderLanes.alternate.memoizedState &&
+          null !== renderLanes.alternate.memoizedState.cachePool &&
+          (nextResource = renderLanes.alternate.memoizedState.cachePool.pool),
+        (currentResource = null),
+        null !== renderLanes.memoizedState &&
+          null !== renderLanes.memoizedState.cachePool &&
+          (currentResource = renderLanes.memoizedState.cachePool.pool),
+        currentResource !== nextResource && (renderLanes.flags |= 2048));
+      newProps !== current &&
         (enableTransitionTracing && (workInProgress.child.flags |= 2048),
-        renderLanes && (workInProgress.child.flags |= 8192));
+        newProps && (workInProgress.child.flags |= 8192));
       scheduleRetryEffect(workInProgress, workInProgress.updateQueue);
       null !== workInProgress.updateQueue &&
         null != workInProgress.memoizedProps.suspenseCallback &&
@@ -6999,30 +7042,30 @@ function completeWork(current, workInProgress, renderLanes) {
       return bubbleProperties(workInProgress), null;
     case 19:
       pop(suspenseStackCursor);
-      type = workInProgress.memoizedState;
-      if (null === type) return bubbleProperties(workInProgress), null;
+      nextResource = workInProgress.memoizedState;
+      if (null === nextResource) return bubbleProperties(workInProgress), null;
       newProps = 0 !== (workInProgress.flags & 128);
-      cache$110 = type.rendering;
-      if (null === cache$110)
-        if (newProps) cutOffTailIfNeeded(type, !1);
+      currentResource = nextResource.rendering;
+      if (null === currentResource)
+        if (newProps) cutOffTailIfNeeded(nextResource, !1);
         else {
           if (
             0 !== workInProgressRootExitStatus ||
             (null !== current && 0 !== (current.flags & 128))
           )
             for (current = workInProgress.child; null !== current; ) {
-              cache$110 = findFirstSuspended(current);
-              if (null !== cache$110) {
+              currentResource = findFirstSuspended(current);
+              if (null !== currentResource) {
                 workInProgress.flags |= 128;
-                cutOffTailIfNeeded(type, !1);
-                current = cache$110.updateQueue;
+                cutOffTailIfNeeded(nextResource, !1);
+                current = currentResource.updateQueue;
                 workInProgress.updateQueue = current;
                 scheduleRetryEffect(workInProgress, current);
                 workInProgress.subtreeFlags = 0;
                 current = renderLanes;
-                for (renderLanes = workInProgress.child; null !== renderLanes; )
-                  resetWorkInProgress(renderLanes, current),
-                    (renderLanes = renderLanes.sibling);
+                for (newProps = workInProgress.child; null !== newProps; )
+                  resetWorkInProgress(newProps, current),
+                    (newProps = newProps.sibling);
                 push(
                   suspenseStackCursor,
                   (suspenseStackCursor.current & 1) | 2
@@ -7031,52 +7074,54 @@ function completeWork(current, workInProgress, renderLanes) {
               }
               current = current.sibling;
             }
-          null !== type.tail &&
+          null !== nextResource.tail &&
             now() > workInProgressRootRenderTargetTime &&
             ((workInProgress.flags |= 128),
             (newProps = !0),
-            cutOffTailIfNeeded(type, !1),
+            cutOffTailIfNeeded(nextResource, !1),
             (workInProgress.lanes = 8388608));
         }
       else {
         if (!newProps)
-          if (((current = findFirstSuspended(cache$110)), null !== current)) {
+          if (
+            ((current = findFirstSuspended(currentResource)), null !== current)
+          ) {
             if (
               ((workInProgress.flags |= 128),
               (newProps = !0),
               (current = current.updateQueue),
               (workInProgress.updateQueue = current),
               scheduleRetryEffect(workInProgress, current),
-              cutOffTailIfNeeded(type, !0),
-              null === type.tail &&
-                "hidden" === type.tailMode &&
-                !cache$110.alternate &&
+              cutOffTailIfNeeded(nextResource, !0),
+              null === nextResource.tail &&
+                "hidden" === nextResource.tailMode &&
+                !currentResource.alternate &&
                 !isHydrating)
             )
               return bubbleProperties(workInProgress), null;
           } else
-            2 * now() - type.renderingStartTime >
+            2 * now() - nextResource.renderingStartTime >
               workInProgressRootRenderTargetTime &&
               1073741824 !== renderLanes &&
               ((workInProgress.flags |= 128),
               (newProps = !0),
-              cutOffTailIfNeeded(type, !1),
+              cutOffTailIfNeeded(nextResource, !1),
               (workInProgress.lanes = 8388608));
-        type.isBackwards
-          ? ((cache$110.sibling = workInProgress.child),
-            (workInProgress.child = cache$110))
-          : ((current = type.last),
+        nextResource.isBackwards
+          ? ((currentResource.sibling = workInProgress.child),
+            (workInProgress.child = currentResource))
+          : ((current = nextResource.last),
             null !== current
-              ? (current.sibling = cache$110)
-              : (workInProgress.child = cache$110),
-            (type.last = cache$110));
+              ? (current.sibling = currentResource)
+              : (workInProgress.child = currentResource),
+            (nextResource.last = currentResource));
       }
-      if (null !== type.tail)
+      if (null !== nextResource.tail)
         return (
-          (workInProgress = type.tail),
-          (type.rendering = workInProgress),
-          (type.tail = workInProgress.sibling),
-          (type.renderingStartTime = now()),
+          (workInProgress = nextResource.tail),
+          (nextResource.rendering = workInProgress),
+          (nextResource.tail = workInProgress.sibling),
+          (nextResource.renderingStartTime = now()),
           (workInProgress.sibling = null),
           (current = suspenseStackCursor.current),
           push(suspenseStackCursor, newProps ? (current & 1) | 2 : current & 1),
@@ -7121,27 +7166,27 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.subtreeFlags & 6 &&
               (workInProgress.flags |= 8192))
           : bubbleProperties(workInProgress),
-        (renderLanes = workInProgress.updateQueue),
-        null !== renderLanes &&
-          scheduleRetryEffect(workInProgress, renderLanes.retryQueue),
-        (renderLanes = null),
+        (newProps = workInProgress.updateQueue),
+        null !== newProps &&
+          scheduleRetryEffect(workInProgress, newProps.retryQueue),
+        (newProps = null),
         null !== current &&
           null !== current.memoizedState &&
           null !== current.memoizedState.cachePool &&
-          (renderLanes = current.memoizedState.cachePool.pool),
-        (newProps = null),
+          (newProps = current.memoizedState.cachePool.pool),
+        (renderLanes = null),
         null !== workInProgress.memoizedState &&
           null !== workInProgress.memoizedState.cachePool &&
-          (newProps = workInProgress.memoizedState.cachePool.pool),
-        newProps !== renderLanes && (workInProgress.flags |= 2048),
+          (renderLanes = workInProgress.memoizedState.cachePool.pool),
+        renderLanes !== newProps && (workInProgress.flags |= 2048),
         popTransition(workInProgress, current),
         null
       );
     case 24:
       return (
-        (renderLanes = null),
-        null !== current && (renderLanes = current.memoizedState.cache),
-        workInProgress.memoizedState.cache !== renderLanes &&
+        (newProps = null),
+        null !== current && (newProps = current.memoizedState.cache),
+        workInProgress.memoizedState.cache !== newProps &&
           (workInProgress.flags |= 2048),
         popProvider(CacheContext),
         bubbleProperties(workInProgress),
@@ -7361,8 +7406,8 @@ function safelyDetachRef(current, nearestMountedAncestor) {
     else if ("function" === typeof ref)
       try {
         ref(null);
-      } catch (error$127) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error$127);
+      } catch (error$128) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$128);
       }
     else ref.current = null;
 }
@@ -7399,7 +7444,7 @@ function commitBeforeMutationEffects(root, firstChild) {
           selection = selection.focusOffset;
           try {
             JSCompiler_temp.nodeType, focusNode.nodeType;
-          } catch (e$189) {
+          } catch (e$190) {
             JSCompiler_temp = null;
             break a;
           }
@@ -7675,11 +7720,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) {
               current,
               finishedRoot.__reactInternalSnapshotBeforeUpdate
             );
-          } catch (error$129) {
+          } catch (error$130) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$129
+              error$130
             );
           }
         }
@@ -8353,8 +8398,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         }
         try {
           commitHookEffectListUnmount(5, finishedWork, finishedWork.return);
-        } catch (error$142) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$142);
+        } catch (error$143) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$143);
         }
       }
       break;
@@ -8532,11 +8577,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               newProps
             );
             domElement[internalPropsKey] = newProps;
-          } catch (error$143) {
+          } catch (error$144) {
             captureCommitPhaseError(
               finishedWork,
               finishedWork.return,
-              error$143
+              error$144
             );
           }
       break;
@@ -8572,8 +8617,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         root = finishedWork.stateNode;
         try {
           setTextContent(root, "");
-        } catch (error$144) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$144);
+        } catch (error$145) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$145);
         }
       }
       if (
@@ -8590,8 +8635,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         try {
           updateProperties(flags, maybeNodes, hoistableRoot, current, root),
             (flags[internalPropsKey] = root);
-        } catch (error$147) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$147);
+        } catch (error$148) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
         }
       break;
     case 6:
@@ -8604,8 +8649,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
         flags = finishedWork.memoizedProps;
         try {
           current.nodeValue = flags;
-        } catch (error$148) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$148);
+        } catch (error$149) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
         }
       }
       break;
@@ -8619,8 +8664,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
       if (flags & 4 && null !== current && current.memoizedState.isDehydrated)
         try {
           retryIfBlockedOn(root.containerInfo);
-        } catch (error$149) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$149);
+        } catch (error$150) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$150);
         }
       break;
     case 4:
@@ -8650,8 +8695,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
               null !== retryQueue && suspenseCallback(new Set(retryQueue));
             }
           }
-        } catch (error$151) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error$151);
+        } catch (error$152) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error$152);
         }
         current = finishedWork.updateQueue;
         null !== current &&
@@ -8729,11 +8774,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) {
             if (null === current)
               try {
                 root.stateNode.nodeValue = domElement ? "" : root.memoizedProps;
-              } catch (error$132) {
+              } catch (error$133) {
                 captureCommitPhaseError(
                   finishedWork,
                   finishedWork.return,
-                  error$132
+                  error$133
                 );
               }
           } else if (
@@ -8808,21 +8853,21 @@ function commitReconciliationEffects(finishedWork) {
             insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0);
             break;
           case 5:
-            var parent$133 = JSCompiler_inline_result.stateNode;
+            var parent$134 = JSCompiler_inline_result.stateNode;
             JSCompiler_inline_result.flags & 32 &&
-              (setTextContent(parent$133, ""),
+              (setTextContent(parent$134, ""),
               (JSCompiler_inline_result.flags &= -33));
-            var before$134 = getHostSibling(finishedWork);
-            insertOrAppendPlacementNode(finishedWork, before$134, parent$133);
+            var before$135 = getHostSibling(finishedWork);
+            insertOrAppendPlacementNode(finishedWork, before$135, parent$134);
             break;
           case 3:
           case 4:
-            var parent$135 = JSCompiler_inline_result.stateNode.containerInfo,
-              before$136 = getHostSibling(finishedWork);
+            var parent$136 = JSCompiler_inline_result.stateNode.containerInfo,
+              before$137 = getHostSibling(finishedWork);
             insertOrAppendPlacementNodeIntoContainer(
               finishedWork,
-              before$136,
-              parent$135
+              before$137,
+              parent$136
             );
             break;
           default:
@@ -9292,9 +9337,9 @@ function recursivelyTraverseReconnectPassiveEffects(
           );
         break;
       case 22:
-        var instance$161 = finishedWork.stateNode;
+        var instance$162 = finishedWork.stateNode;
         null !== finishedWork.memoizedState
-          ? instance$161._visibility & 4
+          ? instance$162._visibility & 4
             ? recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9307,7 +9352,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork
               )
-            : ((instance$161._visibility |= 4),
+            : ((instance$162._visibility |= 4),
               recursivelyTraverseReconnectPassiveEffects(
                 finishedRoot,
                 finishedWork,
@@ -9315,7 +9360,7 @@ function recursivelyTraverseReconnectPassiveEffects(
                 committedTransitions,
                 includeWorkInProgressEffects
               ))
-          : ((instance$161._visibility |= 4),
+          : ((instance$162._visibility |= 4),
             recursivelyTraverseReconnectPassiveEffects(
               finishedRoot,
               finishedWork,
@@ -9328,7 +9373,7 @@ function recursivelyTraverseReconnectPassiveEffects(
           commitOffscreenPassiveMountEffects(
             finishedWork.alternate,
             finishedWork,
-            instance$161
+            instance$162
           );
         break;
       case 24:
@@ -9399,8 +9444,9 @@ function recursivelyTraverseAtomicPassiveEffects(
       parentFiber = parentFiber.sibling;
     }
 }
+var suspenseyCommitFlag = 8192;
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & 16777216)
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag)
     for (parentFiber = parentFiber.child; null !== parentFiber; )
       accumulateSuspenseyCommitOnFiber(parentFiber),
         (parentFiber = parentFiber.sibling);
@@ -9409,7 +9455,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
   switch (fiber.tag) {
     case 26:
       recursivelyAccumulateSuspenseyCommit(fiber);
-      fiber.flags & 16777216 &&
+      fiber.flags & suspenseyCommitFlag &&
         null !== fiber.memoizedState &&
         suspendResource(
           currentHoistableRoot,
@@ -9427,6 +9473,17 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
       recursivelyAccumulateSuspenseyCommit(fiber);
       currentHoistableRoot = previousHoistableRoot;
       break;
+    case 22:
+      null === fiber.memoizedState &&
+        ((previousHoistableRoot = fiber.alternate),
+        null !== previousHoistableRoot &&
+        null !== previousHoistableRoot.memoizedState
+          ? ((previousHoistableRoot = suspenseyCommitFlag),
+            (suspenseyCommitFlag = 16777216),
+            recursivelyAccumulateSuspenseyCommit(fiber),
+            (suspenseyCommitFlag = previousHoistableRoot))
+          : recursivelyAccumulateSuspenseyCommit(fiber));
+      break;
     default:
       recursivelyAccumulateSuspenseyCommit(fiber);
   }
@@ -10100,16 +10157,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         exitStatus = renderRootSync(root, lanes);
         if (2 === exitStatus) {
           errorRetryLanes = lanes;
-          var errorRetryLanes$171 = getLanesToRetrySynchronouslyOnError(
+          var errorRetryLanes$172 = getLanesToRetrySynchronouslyOnError(
             root,
             errorRetryLanes
           );
-          0 !== errorRetryLanes$171 &&
-            ((lanes = errorRetryLanes$171),
+          0 !== errorRetryLanes$172 &&
+            ((lanes = errorRetryLanes$172),
             (exitStatus = recoverFromConcurrentError(
               root,
               errorRetryLanes,
-              errorRetryLanes$171
+              errorRetryLanes$172
             )));
         }
         if (1 === exitStatus)
@@ -10170,14 +10227,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
           if ((lanes & 8388480) === lanes) break;
           exitStatus = lanes;
           errorRetryLanes = root.eventTimes;
-          for (errorRetryLanes$171 = -1; 0 < exitStatus; ) {
+          for (errorRetryLanes$172 = -1; 0 < exitStatus; ) {
             var index$1 = 31 - clz32(exitStatus),
               lane = 1 << index$1;
             index$1 = errorRetryLanes[index$1];
-            index$1 > errorRetryLanes$171 && (errorRetryLanes$171 = index$1);
+            index$1 > errorRetryLanes$172 && (errorRetryLanes$172 = index$1);
             exitStatus &= ~lane;
           }
-          exitStatus = errorRetryLanes$171;
+          exitStatus = errorRetryLanes$172;
           exitStatus = now() - exitStatus;
           exitStatus =
             (120 > exitStatus
@@ -10465,18 +10522,8 @@ function handleThrow(root, thrownValue) {
   ReactCurrentOwner.current = null;
   thrownValue === SuspenseException
     ? ((thrownValue = getSuspendedThenable()),
-      (workInProgressRootRenderLanes & 8388480) ===
-      workInProgressRootRenderLanes
-        ? (root = null === shellBoundary ? !0 : !1)
-        : ((root = suspenseHandlerStackCursor.current),
-          (root =
-            null !== root &&
-            (workInProgressRootRenderLanes & 125829120) ===
-              workInProgressRootRenderLanes
-              ? root === shellBoundary
-              : !1)),
       (workInProgressSuspendedReason =
-        root &&
+        shouldRemainOnPreviousScreen() &&
         0 === (workInProgressRootSkippedLanes & 268435455) &&
         0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)
           ? 2
@@ -10497,6 +10544,20 @@ function handleThrow(root, thrownValue) {
     ((workInProgressRootExitStatus = 1),
     (workInProgressRootFatalError = thrownValue));
 }
+function shouldRemainOnPreviousScreen() {
+  if (
+    (workInProgressRootRenderLanes & 8388480) ===
+    workInProgressRootRenderLanes
+  )
+    return null === shellBoundary ? !0 : !1;
+  var handler = suspenseHandlerStackCursor.current;
+  return null === handler ||
+    ((workInProgressRootRenderLanes & 125829120) !==
+      workInProgressRootRenderLanes &&
+      0 === (workInProgressRootRenderLanes & 1073741824))
+    ? !1
+    : handler === shellBoundary;
+}
 function pushDispatcher(container) {
   container = getHoistableRoot(container);
   lastCurrentDocument = container.ownerDocument || container;
@@ -10544,8 +10605,8 @@ function renderRootSync(root, lanes) {
       }
       workLoopSync();
       break;
-    } catch (thrownValue$174) {
-      handleThrow(root, thrownValue$174);
+    } catch (thrownValue$175) {
+      handleThrow(root, thrownValue$175);
     }
   while (1);
   resetContextDependencies();
@@ -10651,8 +10712,8 @@ function renderRootConcurrent(root, lanes) {
       }
       workLoopConcurrent();
       break;
-    } catch (thrownValue$176) {
-      handleThrow(root, thrownValue$176);
+    } catch (thrownValue$177) {
+      handleThrow(root, thrownValue$177);
     }
   while (1);
   resetContextDependencies();
@@ -11007,12 +11068,12 @@ function commitRootImpl(
     var prevExecutionContext = executionContext;
     executionContext |= 4;
     ReactCurrentOwner.current = null;
-    var shouldFireAfterActiveInstanceBlur$178 = commitBeforeMutationEffects(
+    var shouldFireAfterActiveInstanceBlur$179 = commitBeforeMutationEffects(
       root,
       finishedWork
     );
     commitMutationEffectsOnFiber(finishedWork, root);
-    shouldFireAfterActiveInstanceBlur$178 &&
+    shouldFireAfterActiveInstanceBlur$179 &&
       ((_enabled = !0),
       dispatchAfterDetachedBlur(selectionInformation.focusedElem),
       (_enabled = !1));
@@ -11091,7 +11152,7 @@ function releaseRootPooledCache(root, remainingLanes) {
 }
 function flushPassiveEffects() {
   if (null !== rootWithPendingPassiveEffects) {
-    var root$179 = rootWithPendingPassiveEffects,
+    var root$180 = rootWithPendingPassiveEffects,
       remainingLanes = pendingPassiveEffectsRemainingLanes;
     pendingPassiveEffectsRemainingLanes = 0;
     var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
@@ -11107,7 +11168,7 @@ function flushPassiveEffects() {
     } finally {
       (currentUpdatePriority = previousPriority),
         (ReactCurrentBatchConfig$1.transition = prevTransition),
-        releaseRootPooledCache(root$179, remainingLanes);
+        releaseRootPooledCache(root$180, remainingLanes);
     }
   }
   return !1;
@@ -12300,12 +12361,12 @@ function updateContainer(element, container, parentComponent, callback) {
 function attemptSynchronousHydration(fiber) {
   switch (fiber.tag) {
     case 3:
-      var root$181 = fiber.stateNode;
-      if (root$181.current.memoizedState.isDehydrated) {
-        var lanes = getHighestPriorityLanes(root$181.pendingLanes);
+      var root$182 = fiber.stateNode;
+      if (root$182.current.memoizedState.isDehydrated) {
+        var lanes = getHighestPriorityLanes(root$182.pendingLanes);
         0 !== lanes &&
-          (markRootEntangled(root$181, lanes | 2),
-          ensureRootIsScheduled(root$181, now()),
+          (markRootEntangled(root$182, lanes | 2),
+          ensureRootIsScheduled(root$182, now()),
           0 === (executionContext & 6) &&
             ((workInProgressRootRenderTargetTime = now() + 500),
             flushSyncCallbacks()));
@@ -13579,19 +13640,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) {
 }
 var isInputEventSupported = !1;
 if (canUseDOM) {
-  var JSCompiler_inline_result$jscomp$298;
+  var JSCompiler_inline_result$jscomp$301;
   if (canUseDOM) {
-    var isSupported$jscomp$inline_1540 = "oninput" in document;
-    if (!isSupported$jscomp$inline_1540) {
-      var element$jscomp$inline_1541 = document.createElement("div");
-      element$jscomp$inline_1541.setAttribute("oninput", "return;");
-      isSupported$jscomp$inline_1540 =
-        "function" === typeof element$jscomp$inline_1541.oninput;
+    var isSupported$jscomp$inline_1555 = "oninput" in document;
+    if (!isSupported$jscomp$inline_1555) {
+      var element$jscomp$inline_1556 = document.createElement("div");
+      element$jscomp$inline_1556.setAttribute("oninput", "return;");
+      isSupported$jscomp$inline_1555 =
+        "function" === typeof element$jscomp$inline_1556.oninput;
     }
-    JSCompiler_inline_result$jscomp$298 = isSupported$jscomp$inline_1540;
-  } else JSCompiler_inline_result$jscomp$298 = !1;
+    JSCompiler_inline_result$jscomp$301 = isSupported$jscomp$inline_1555;
+  } else JSCompiler_inline_result$jscomp$301 = !1;
   isInputEventSupported =
-    JSCompiler_inline_result$jscomp$298 &&
+    JSCompiler_inline_result$jscomp$301 &&
     (!document.documentMode || 9 < document.documentMode);
 }
 function stopWatchingForValueChange() {
@@ -13900,20 +13961,20 @@ function registerSimpleEvent(domEventName, reactName) {
   registerTwoPhaseEvent(reactName, [domEventName]);
 }
 for (
-  var i$jscomp$inline_1581 = 0;
-  i$jscomp$inline_1581 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1581++
+  var i$jscomp$inline_1596 = 0;
+  i$jscomp$inline_1596 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1596++
 ) {
-  var eventName$jscomp$inline_1582 =
-      simpleEventPluginEvents[i$jscomp$inline_1581],
-    domEventName$jscomp$inline_1583 =
-      eventName$jscomp$inline_1582.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1584 =
-      eventName$jscomp$inline_1582[0].toUpperCase() +
-      eventName$jscomp$inline_1582.slice(1);
+  var eventName$jscomp$inline_1597 =
+      simpleEventPluginEvents[i$jscomp$inline_1596],
+    domEventName$jscomp$inline_1598 =
+      eventName$jscomp$inline_1597.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1599 =
+      eventName$jscomp$inline_1597[0].toUpperCase() +
+      eventName$jscomp$inline_1597.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1583,
-    "on" + capitalizedEvent$jscomp$inline_1584
+    domEventName$jscomp$inline_1598,
+    "on" + capitalizedEvent$jscomp$inline_1599
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15354,14 +15415,14 @@ function preinit$1(href, options) {
       switch (as) {
         case "style":
           as = getResourcesFromRoot(resourceRoot).hoistableStyles;
-          var key$199 = getStyleKey(href),
+          var key$200 = getStyleKey(href),
             precedence = options.precedence || "default",
-            resource = as.get(key$199);
+            resource = as.get(key$200);
           if (resource) break;
           var state = { loading: 0, preload: null };
           if (
             (resource = resourceRoot.querySelector(
-              getStylesheetSelectorFromKey(key$199)
+              getStylesheetSelectorFromKey(key$200)
             ))
           )
             state.loading = 1;
@@ -15372,7 +15433,7 @@ function preinit$1(href, options) {
               "data-precedence": precedence,
               crossOrigin: options.crossOrigin
             };
-            (options = preloadPropsMap.get(key$199)) &&
+            (options = preloadPropsMap.get(key$200)) &&
               adoptPreloadPropsForStylesheet(href, options);
             var link = (resource = (
               resourceRoot.ownerDocument || resourceRoot
@@ -15389,6 +15450,7 @@ function preinit$1(href, options) {
             link.addEventListener("error", function () {
               state.loading |= 2;
             });
+            state.loading |= 4;
             insertStylesheet(resource, precedence, resourceRoot);
           }
           resource = {
@@ -15397,15 +15459,15 @@ function preinit$1(href, options) {
             count: 1,
             state: state
           };
-          as.set(key$199, resource);
+          as.set(key$200, resource);
           break;
         case "script":
           (as = getResourcesFromRoot(resourceRoot).hoistableScripts),
-            (key$199 = getScriptKey(href)),
-            (precedence = as.get(key$199)),
+            (key$200 = getScriptKey(href)),
+            (precedence = as.get(key$200)),
             precedence ||
               ((precedence = resourceRoot.querySelector(
-                "script[async]" + key$199
+                "script[async]" + key$200
               )),
               precedence ||
                 ((href = {
@@ -15414,7 +15476,7 @@ function preinit$1(href, options) {
                   crossOrigin: options.crossOrigin,
                   integrity: options.integrity
                 }),
-                (options = preloadPropsMap.get(key$199)) &&
+                (options = preloadPropsMap.get(key$200)) &&
                   adoptPreloadPropsForScript(href, options),
                 (options = resourceRoot.ownerDocument || resourceRoot),
                 (precedence = options.createElement("script")),
@@ -15427,13 +15489,13 @@ function preinit$1(href, options) {
                 count: 1,
                 state: null
               }),
-              as.set(key$199, precedence));
+              as.set(key$200, precedence));
       }
     else if ("style" === as || "script" === as)
       if ((resourceRoot = getDocumentForPreloads())) {
-        key$199 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-        precedence = key$199 =
-          'link[rel="preload"][as="' + as + '"][href="' + key$199 + '"]';
+        key$200 = escapeSelectorAttributeValueInsideDoubleQuotes(href);
+        precedence = key$200 =
+          'link[rel="preload"][as="' + as + '"][href="' + key$200 + '"]';
         switch (as) {
           case "style":
             precedence = getStyleKey(href);
@@ -15450,7 +15512,7 @@ function preinit$1(href, options) {
             integrity: options.integrity
           }),
           preloadPropsMap.set(precedence, href),
-          null === resourceRoot.querySelector(key$199) &&
+          null === resourceRoot.querySelector(key$200) &&
             ((options = resourceRoot.createElement("link")),
             setInitialProperties(options, "link", href),
             markNodeAsHoistable(options),
@@ -15483,17 +15545,17 @@ function getResource(type, currentProps, pendingProps) {
         "string" === typeof pendingProps.precedence
       ) {
         type = getStyleKey(pendingProps.href);
-        var styles$208 = getResourcesFromRoot(currentProps).hoistableStyles,
-          resource$209 = styles$208.get(type);
-        resource$209 ||
+        var styles$209 = getResourcesFromRoot(currentProps).hoistableStyles,
+          resource$210 = styles$209.get(type);
+        resource$210 ||
           ((currentProps = currentProps.ownerDocument || currentProps),
-          (resource$209 = {
+          (resource$210 = {
             type: "stylesheet",
             instance: null,
             count: 0,
             state: { loading: 0, preload: null }
           }),
-          styles$208.set(type, resource$209),
+          styles$209.set(type, resource$210),
           preloadPropsMap.has(type) ||
             preloadStylesheet(
               currentProps,
@@ -15508,9 +15570,9 @@ function getResource(type, currentProps, pendingProps) {
                 hrefLang: pendingProps.hrefLang,
                 referrerPolicy: pendingProps.referrerPolicy
               },
-              resource$209.state
+              resource$210.state
             ));
-        return resource$209;
+        return resource$210;
       }
       return null;
     case "script":
@@ -15582,35 +15644,36 @@ function acquireResource(hoistableRoot, resource, props) {
         return (resource.instance = key);
       case "stylesheet":
         styleProps = getStyleKey(props.href);
-        var instance$214 = hoistableRoot.querySelector(
+        var instance$215 = hoistableRoot.querySelector(
           getStylesheetSelectorFromKey(styleProps)
         );
-        if (instance$214)
+        if (instance$215)
           return (
-            (resource.instance = instance$214),
-            markNodeAsHoistable(instance$214),
-            instance$214
+            (resource.instance = instance$215),
+            markNodeAsHoistable(instance$215),
+            instance$215
           );
         key = stylesheetPropsFromRawProps(props);
         (styleProps = preloadPropsMap.get(styleProps)) &&
           adoptPreloadPropsForStylesheet(key, styleProps);
-        instance$214 = (
+        instance$215 = (
           hoistableRoot.ownerDocument || hoistableRoot
         ).createElement("link");
-        markNodeAsHoistable(instance$214);
-        var linkInstance = instance$214;
+        markNodeAsHoistable(instance$215);
+        var linkInstance = instance$215;
         linkInstance._p = new Promise(function (resolve, reject) {
           linkInstance.onload = resolve;
           linkInstance.onerror = reject;
         });
-        setInitialProperties(instance$214, "link", key);
-        insertStylesheet(instance$214, props.precedence, hoistableRoot);
-        return (resource.instance = instance$214);
+        setInitialProperties(instance$215, "link", key);
+        resource.state.loading |= 4;
+        insertStylesheet(instance$215, props.precedence, hoistableRoot);
+        return (resource.instance = instance$215);
       case "script":
-        instance$214 = getScriptKey(props.src);
+        instance$215 = getScriptKey(props.src);
         if (
           (styleProps = hoistableRoot.querySelector(
-            "script[async]" + instance$214
+            "script[async]" + instance$215
           ))
         )
           return (
@@ -15619,7 +15682,7 @@ function acquireResource(hoistableRoot, resource, props) {
             styleProps
           );
         key = props;
-        if ((styleProps = preloadPropsMap.get(instance$214)))
+        if ((styleProps = preloadPropsMap.get(instance$215)))
           (key = assign({}, props)),
             adoptPreloadPropsForScript(key, styleProps);
         hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot;
@@ -15633,6 +15696,12 @@ function acquireResource(hoistableRoot, resource, props) {
       default:
         throw Error(formatProdErrorMessage(443, resource.type));
     }
+  else
+    "stylesheet" === resource.type &&
+      0 === (resource.state.loading & 4) &&
+      ((key = resource.instance),
+      (resource.state.loading |= 4),
+      insertStylesheet(key, props.precedence, hoistableRoot));
   return resource.instance;
 }
 function insertStylesheet(instance, precedence, root) {
@@ -15984,17 +16053,17 @@ Internals.Events = [
   restoreStateIfNeeded,
   batchedUpdates$1
 ];
-var devToolsConfig$jscomp$inline_1754 = {
+var devToolsConfig$jscomp$inline_1769 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-770d70a2",
+  version: "18.3.0-www-modern-4cb7601b",
   rendererPackageName: "react-dom"
 };
-var internals$jscomp$inline_2154 = {
-  bundleType: devToolsConfig$jscomp$inline_1754.bundleType,
-  version: devToolsConfig$jscomp$inline_1754.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1754.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1754.rendererConfig,
+var internals$jscomp$inline_2166 = {
+  bundleType: devToolsConfig$jscomp$inline_1769.bundleType,
+  version: devToolsConfig$jscomp$inline_1769.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1769.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1769.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -16011,26 +16080,26 @@ var internals$jscomp$inline_2154 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1754.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1769.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-770d70a2"
+  reconcilerVersion: "18.3.0-www-modern-4cb7601b"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2167 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2155.isDisabled &&
-    hook$jscomp$inline_2155.supportsFiber
+    !hook$jscomp$inline_2167.isDisabled &&
+    hook$jscomp$inline_2167.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2155.inject(
-        internals$jscomp$inline_2154
+      (rendererID = hook$jscomp$inline_2167.inject(
+        internals$jscomp$inline_2166
       )),
-        (injectedHook = hook$jscomp$inline_2155);
+        (injectedHook = hook$jscomp$inline_2167);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
@@ -16338,4 +16407,4 @@ exports.unstable_createEventHandle = function (type, options) {
   return eventHandle;
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-modern-770d70a2";
+exports.version = "18.3.0-www-modern-4cb7601b";
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
index aa575a1951..25db9a261d 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
@@ -480,11 +480,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -518,8 +519,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -550,7 +551,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -2143,9 +2144,6 @@ function prepareScopeUpdate(scopeInstance, inst) {
 function getInstanceFromScope(scopeInstance) {
   return nodeToInstanceMap.get(scopeInstance) || null;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
@@ -4557,13 +4555,6 @@ function trackUsedThenable(thenableState, thenable, index) {
     }
   }
 }
-function suspendCommit() {
-  // This extra indirection only exists so it can handle passing
-  // noopSuspenseyCommitThenable through to throwException.
-  // TODO: Factor the thenable check out of throwException
-  suspendedThenable = noopSuspenseyCommitThenable;
-  throw SuspenseyCommitException;
-} // This is used to track the actual thenable that suspended so it can be
 // passed to the rest of the Suspense implementation — which, for historical
 // reasons, expects to receive a thenable.
 
@@ -15302,7 +15293,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -15313,28 +15308,16 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
-
-  if (!includesOnlyNonUrgentLanes(renderLanes));
-  else {
-    // Preload the instance
-    var isReady = preloadInstance();
-
-    if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
-        suspendCommit();
-      }
-    }
-  }
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
 }
 
 function scheduleRetryEffect(workInProgress, retryQueue) {
@@ -15740,12 +15723,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -15782,7 +15763,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -15804,17 +15785,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -19565,13 +19536,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -19586,7 +19568,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource();
         }
@@ -19602,8 +19584,36 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     }
 
     case HostRoot:
-    case HostPortal:
-    // eslint-disable-next-line-no-fallthrough
+    case HostPortal: {
+      {
+        recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
+    }
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -21384,15 +21394,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -24353,7 +24372,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-5df7639d";
+var ReactVersion = "18.3.0-www-classic-d0bd2b40";
 
 // Might add PROFILE later.
 
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
index bc5a619f26..5bb0f03e7c 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -480,11 +480,12 @@ var Visibility =
   8192;
 var StoreConsistency =
   /*             */
-  16384; // It's OK to reuse this bit because these flags are mutually exclusive for
+  16384; // It's OK to reuse these bits because these flags are mutually exclusive for
 // different fiber types. We should really be doing this for as many flags as
 // possible, because we're about to run out of bits.
 
 var ScheduleRetry = StoreConsistency;
+var ShouldSuspendCommit = Visibility;
 var LifecycleEffectMask =
   Passive$1 | Update | Callback | Ref | Snapshot | StoreConsistency; // Union of all commit flags (flags with the lifetime of a particular commit)
 
@@ -518,8 +519,8 @@ var LayoutStatic =
 var PassiveStatic =
   /*                */
   8388608;
-var SuspenseyCommit =
-  /*              */
+var MaySuspendCommit =
+  /*             */
   16777216; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
 
 var PlacementDEV =
@@ -550,7 +551,7 @@ var PassiveMask = Passive$1 | Visibility | ChildDeletion; // Union of tags that
 // This allows certain concepts to persist without recalculating them,
 // e.g. whether a subtree contains passive effects or portals.
 
-var StaticMask = LayoutStatic | PassiveStatic | RefStatic | SuspenseyCommit;
+var StaticMask = LayoutStatic | PassiveStatic | RefStatic | MaySuspendCommit;
 
 var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -2143,9 +2144,6 @@ function prepareScopeUpdate(scopeInstance, inst) {
 function getInstanceFromScope(scopeInstance) {
   return nodeToInstanceMap.get(scopeInstance) || null;
 }
-function maySuspendCommit(type, props) {
-  return false;
-}
 function preloadInstance(type, props) {
   // Return true to indicate it's already loaded
   return true;
@@ -4557,13 +4555,6 @@ function trackUsedThenable(thenableState, thenable, index) {
     }
   }
 }
-function suspendCommit() {
-  // This extra indirection only exists so it can handle passing
-  // noopSuspenseyCommitThenable through to throwException.
-  // TODO: Factor the thenable check out of throwException
-  suspendedThenable = noopSuspenseyCommitThenable;
-  throw SuspenseyCommitException;
-} // This is used to track the actual thenable that suspended so it can be
 // passed to the rest of the Suspense implementation — which, for historical
 // reasons, expects to receive a thenable.
 
@@ -15302,7 +15293,11 @@ function updateHostComponent(
       markUpdate(workInProgress);
     }
   }
-} // TODO: This should ideally move to begin phase, but currently the instance is
+} // This function must be called at the very end of the complete phase, because
+// it might throw to suspend, and if the resource immediately loads, the work
+// loop will resume rendering as if the work-in-progress completed. So it must
+// fully complete.
+// TODO: This should ideally move to begin phase, but currently the instance is
 // not created until the complete phase. For our existing use cases, host nodes
 // that suspend don't have children, so it doesn't matter. But that might not
 // always be true in the future.
@@ -15313,28 +15308,16 @@ function preloadInstanceAndSuspendIfNeeded(
   props,
   renderLanes
 ) {
-  workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same
-  // check that `useDeferredValue` does to determine whether it needs to
-  // defer. This is partly for gradual adoption purposes (i.e. shouldn't start
-  // suspending until you opt in with startTransition or Suspense) but it
-  // also happens to be the desired behavior for the concrete use cases we've
-  // thought of so far, like CSS loading, fonts, images, etc.
-  // TODO: We may decide to expose a way to force a fallback even during a
-  // sync update.
-
-  if (!includesOnlyNonUrgentLanes(renderLanes));
-  else {
-    // Preload the instance
-    var isReady = preloadInstance();
-
-    if (!isReady) {
-      if (shouldRemainOnPreviousScreen());
-      else {
-        // Trigger a fallback rather than block the render.
-        suspendCommit();
-      }
-    }
-  }
+  {
+    // If this flag was set previously, we can remove it. The flag
+    // represents whether this particular set of props might ever need to
+    // suspend. The safest thing to do is for maySuspendCommit to always
+    // return true, but if the renderer is reasonably confident that the
+    // underlying resource won't be evicted, it can return false as a
+    // performance optimization.
+    workInProgress.flags &= ~MaySuspendCommit;
+    return;
+  } // Mark this fiber with a flag. This gets set on all host instances
 }
 
 function scheduleRetryEffect(workInProgress, retryQueue) {
@@ -15740,12 +15723,10 @@ function completeWork(current, workInProgress, renderLanes) {
 
     case HostComponent: {
       popHostContext(workInProgress);
-      var _type = workInProgress.type;
-
-      var _maySuspend = maySuspendCommit();
+      var _type2 = workInProgress.type;
 
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(current, workInProgress, _type, newProps);
+        updateHostComponent(current, workInProgress, _type2, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -15782,7 +15763,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var _rootContainerInstance = getRootHostContainer();
 
           var _instance3 = createInstance(
-            _type,
+            _type2,
             newProps,
             _rootContainerInstance,
             _currentHostContext2,
@@ -15804,17 +15785,7 @@ function completeWork(current, workInProgress, renderLanes) {
       // will resume rendering as if the work-in-progress completed. So it must
       // fully complete.
 
-      if (_maySuspend) {
-        preloadInstanceAndSuspendIfNeeded(
-          workInProgress,
-          _type,
-          newProps,
-          renderLanes
-        );
-      } else {
-        workInProgress.flags &= ~SuspenseyCommit;
-      }
-
+      preloadInstanceAndSuspendIfNeeded(workInProgress);
       return null;
     }
 
@@ -19565,13 +19536,24 @@ function commitPassiveUnmountEffects(finishedWork) {
   setCurrentFiber(finishedWork);
   commitPassiveUnmountOnFiber(finishedWork);
   resetCurrentFiber();
-}
+} // If we're inside a brand new tree, or a tree that was already visible, then we
+// should only suspend host components that have a ShouldSuspendCommit flag.
+// Components without it haven't changed since the last commit, so we can skip
+// over those.
+//
+// When we enter a tree that is being revealed (going from hidden -> visible),
+// we need to suspend _any_ component that _may_ suspend. Even if they're
+// already in the "current" tree. Because their visibility has changed, the
+// browser may not have prerendered them yet. So we check the MaySuspendCommit
+// flag instead.
+
+var suspenseyCommitFlag = ShouldSuspendCommit;
 function accumulateSuspenseyCommit(finishedWork) {
   accumulateSuspenseyCommitOnFiber(finishedWork);
 }
 
 function recursivelyAccumulateSuspenseyCommit(parentFiber) {
-  if (parentFiber.subtreeFlags & SuspenseyCommit) {
+  if (parentFiber.subtreeFlags & suspenseyCommitFlag) {
     var child = parentFiber.child;
 
     while (child !== null) {
@@ -19586,7 +19568,7 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     case HostHoistable: {
       recursivelyAccumulateSuspenseyCommit(fiber);
 
-      if (fiber.flags & SuspenseyCommit) {
+      if (fiber.flags & suspenseyCommitFlag) {
         if (fiber.memoizedState !== null) {
           suspendResource();
         }
@@ -19602,8 +19584,36 @@ function accumulateSuspenseyCommitOnFiber(fiber) {
     }
 
     case HostRoot:
-    case HostPortal:
-    // eslint-disable-next-line-no-fallthrough
+    case HostPortal: {
+      {
+        recursivelyAccumulateSuspenseyCommit(fiber);
+      }
+
+      break;
+    }
+
+    case OffscreenComponent: {
+      var isHidden = fiber.memoizedState !== null;
+
+      if (isHidden);
+      else {
+        var current = fiber.alternate;
+        var wasHidden = current !== null && current.memoizedState !== null;
+
+        if (wasHidden) {
+          // This tree is being revealed. Visit all newly visible suspensey
+          // instances, even if they're in the current tree.
+          var prevFlags = suspenseyCommitFlag;
+          suspenseyCommitFlag = MaySuspendCommit;
+          recursivelyAccumulateSuspenseyCommit(fiber);
+          suspenseyCommitFlag = prevFlags;
+        } else {
+          recursivelyAccumulateSuspenseyCommit(fiber);
+        }
+      }
+
+      break;
+    }
 
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
@@ -21384,15 +21394,24 @@ function shouldRemainOnPreviousScreen() {
 
   if (handler === null);
   else {
-    if (includesOnlyRetries(workInProgressRootRenderLanes)) {
+    if (
+      includesOnlyRetries(workInProgressRootRenderLanes) || // In this context, an OffscreenLane counts as a Retry
+      // TODO: It's become increasingly clear that Retries and Offscreen are
+      // deeply connected. They probably can be unified further.
+      includesSomeLane(workInProgressRootRenderLanes, OffscreenLane)
+    ) {
       // During a retry, we can suspend rendering if the nearest Suspense boundary
       // is the boundary of the "shell", because we're guaranteed not to block
       // any new content from appearing.
+      //
+      // The reason we must check if this is a retry is because it guarantees
+      // that suspending the work loop won't block an actual update, because
+      // retries don't "update" anything; they fill in fallbacks that were left
+      // behind by a previous transition.
       return handler === getShellBoundary();
     }
   } // For all other Lanes besides Transitions and Retries, we should not wait
   // for the data to load.
-  // TODO: We should wait during Offscreen prerendering, too.
 
   return false;
 }
@@ -24353,7 +24372,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-770d70a2";
+var ReactVersion = "18.3.0-www-modern-4cb7601b";
 
 // Might add PROFILE later.