From 6a86afb87e91b8d983669fd2064057cc7288df4c Mon Sep 17 00:00:00 2001
From: gnoff <gnoff@users.noreply.github.com>
Date: Wed, 25 Oct 2023 18:56:13 +0000
Subject: [PATCH] [Fizz] Do not reinsert stylesheets after initial insert
 (#27586)

The loading state tracking for suspensey CSS is too complicated. Prior
to this change it had a state it could enter into where a stylesheet was
already in the DOM but the loading state did not know it was inserted
causing a later transition to try to insert it again.

This fix is to add proper tracking of insertions on the codepaths that
were missing it. It also modifies the logic of when to suspend based on
whether the stylesheet has already been inserted or not.

This is not 100% correct semantics however because a prior commit could
have inserted a stylesheet and a later transition should ideally be able
to wait on that load before committing. I haven't attempted to fix this
yet however because the loading state tracking is too complicated as it
is and requires a more thorough refactor. Additionally it's not
particularly valuable to delay a transition on a loading stylesheet when
a previous commit also relied on that stylesheet but didn't wait for it
b/c it was sync. I will follow up with an improvement PR later

fixes: https://github.com/facebook/react/issues/27585

DiffTrain build for [a9985529f1aa55477f0feafe2398d36707cf6108](https://github.com/facebook/react/commit/a9985529f1aa55477f0feafe2398d36707cf6108)
---
 compiled/facebook-www/REVISION                |   2 +-
 compiled/facebook-www/React-dev.classic.js    |   2 +-
 compiled/facebook-www/React-prod.modern.js    |   2 +-
 .../facebook-www/React-profiling.modern.js    |   2 +-
 compiled/facebook-www/ReactDOM-dev.classic.js | 119 +++++++++---------
 compiled/facebook-www/ReactDOM-dev.modern.js  | 119 +++++++++---------
 .../facebook-www/ReactDOM-prod.classic.js     |  13 +-
 compiled/facebook-www/ReactDOM-prod.modern.js |  13 +-
 .../ReactDOM-profiling.classic.js             |  13 +-
 .../facebook-www/ReactDOM-profiling.modern.js |  13 +-
 .../ReactDOMTesting-dev.classic.js            | 119 +++++++++---------
 .../ReactDOMTesting-dev.modern.js             | 119 +++++++++---------
 .../ReactDOMTesting-prod.classic.js           |  13 +-
 .../ReactDOMTesting-prod.modern.js            |  13 +-
 14 files changed, 296 insertions(+), 266 deletions(-)

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index f403c9363e..2b5a240743 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-51ffd3564f97b58737df395d30628a27fa71a39d
+a9985529f1aa55477f0feafe2398d36707cf6108
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
index d20a12771f..033e3ebfa9 100644
--- a/compiled/facebook-www/React-dev.classic.js
+++ b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-classic-273dc50b";
+var ReactVersion = "18.3.0-www-classic-8d8af9ad";
 
 // ATTENTION
 // When adding new symbols to this file,
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
index 9d7a5d723b..6f6b13fc1e 100644
--- a/compiled/facebook-www/React-prod.modern.js
+++ b/compiled/facebook-www/React-prod.modern.js
@@ -579,4 +579,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-4e6d4d90";
+exports.version = "18.3.0-www-modern-ac0f5360";
diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
index c098d0250a..2674e1ea3c 100644
--- a/compiled/facebook-www/React-profiling.modern.js
+++ b/compiled/facebook-www/React-profiling.modern.js
@@ -590,7 +590,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-035cd9a2";
+exports.version = "18.3.0-www-modern-a09b3b42";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
index 16daa17789..17ab35672a 100644
--- a/compiled/facebook-www/ReactDOM-dev.classic.js
+++ b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -34159,7 +34159,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-0db07969";
+var ReactVersion = "18.3.0-www-classic-c09aff01";
 
 function createPortal$1(
   children,
@@ -43312,7 +43312,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -43721,6 +43721,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -44306,74 +44307,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
+
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
         }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
+
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
+
+        instance = ownerDocument.createElement("link");
         markNodeAsHoistable(instance);
-        return;
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
+
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
       }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        var _ping = onUnsuspend.bind(state);
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
-
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
-
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
-
-      var _ping = onUnsuspend.bind(state);
-
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }
diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
index e39d41dfcc..16d07bc54c 100644
--- a/compiled/facebook-www/ReactDOM-dev.modern.js
+++ b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -34004,7 +34004,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-b2fbd9ab";
+var ReactVersion = "18.3.0-www-modern-32f0b929";
 
 function createPortal$1(
   children,
@@ -43822,7 +43822,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -44231,6 +44231,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -44816,74 +44817,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
+
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
         }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
+
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
+
+        instance = ownerDocument.createElement("link");
         markNodeAsHoistable(instance);
-        return;
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
+
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
       }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        var _ping = onUnsuspend.bind(state);
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
-
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
-
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
-
-      var _ping = onUnsuspend.bind(state);
-
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }
diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
index ecb79a3396..2d2b86b853 100644
--- a/compiled/facebook-www/ReactDOM-prod.classic.js
+++ b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -15149,7 +15149,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -15375,6 +15375,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$259)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$259),
             markNodeAsHoistable(instance$259),
             instance$259
@@ -15554,7 +15555,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16482,7 +16485,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1796 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-217e3cb6",
+  version: "18.3.0-www-classic-372e3020",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2142 = {
@@ -16512,7 +16515,7 @@ var internals$jscomp$inline_2142 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-217e3cb6"
+  reconcilerVersion: "18.3.0-www-classic-372e3020"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2143 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16849,4 +16852,4 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-classic-217e3cb6";
+exports.version = "18.3.0-www-classic-372e3020";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
index 8c4d3f8d4c..b6c41e98b5 100644
--- a/compiled/facebook-www/ReactDOM-prod.modern.js
+++ b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -15378,7 +15378,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -15604,6 +15604,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$263)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$263),
             markNodeAsHoistable(instance$263),
             instance$263
@@ -15783,7 +15784,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16008,7 +16011,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1755 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-6e7deda2",
+  version: "18.3.0-www-modern-efcd4001",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2106 = {
@@ -16039,7 +16042,7 @@ var internals$jscomp$inline_2106 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-6e7deda2"
+  reconcilerVersion: "18.3.0-www-modern-efcd4001"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2107 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16304,4 +16307,4 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-modern-6e7deda2";
+exports.version = "18.3.0-www-modern-efcd4001";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
index 29b36574e2..4895045030 100644
--- a/compiled/facebook-www/ReactDOM-profiling.classic.js
+++ b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -15925,7 +15925,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -16151,6 +16151,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$280)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$280),
             markNodeAsHoistable(instance$280),
             instance$280
@@ -16330,7 +16331,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -17258,7 +17261,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1881 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-8b07531e",
+  version: "18.3.0-www-classic-a0476b39",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17302,7 +17305,7 @@ var devToolsConfig$jscomp$inline_1881 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-8b07531e"
+  reconcilerVersion: "18.3.0-www-classic-a0476b39"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -17626,7 +17629,7 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-classic-8b07531e";
+exports.version = "18.3.0-www-classic-a0476b39";
 
           /* 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 8953458580..445ecdd487 100644
--- a/compiled/facebook-www/ReactDOM-profiling.modern.js
+++ b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -16148,7 +16148,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -16374,6 +16374,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$284)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$284),
             markNodeAsHoistable(instance$284),
             instance$284
@@ -16553,7 +16554,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16778,7 +16781,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1840 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-7d9d57c7",
+  version: "18.3.0-www-modern-75e3de0a",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16823,7 +16826,7 @@ var devToolsConfig$jscomp$inline_1840 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-7d9d57c7"
+  reconcilerVersion: "18.3.0-www-modern-75e3de0a"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -17075,7 +17078,7 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-modern-7d9d57c7";
+exports.version = "18.3.0-www-modern-75e3de0a";
 
           /* 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 b9c8fe1306..81763bc507 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -34776,7 +34776,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-200887f0";
+var ReactVersion = "18.3.0-www-classic-aab000c9";
 
 function createPortal$1(
   children,
@@ -44061,7 +44061,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -44470,6 +44470,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -45055,74 +45056,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
+
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
         }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
+
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
+
+        instance = ownerDocument.createElement("link");
         markNodeAsHoistable(instance);
-        return;
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
+
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
       }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        var _ping = onUnsuspend.bind(state);
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
-
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
-
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
-
-      var _ping = onUnsuspend.bind(state);
-
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
index 7ae3f18754..f2defc93e4 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -34621,7 +34621,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-4e6d4d90";
+var ReactVersion = "18.3.0-www-modern-ac0f5360";
 
 function createPortal$1(
   children,
@@ -44571,7 +44571,7 @@ function preinitStyle(href, precedence, options) {
     );
 
     if (instance) {
-      state.loading = Loaded;
+      state.loading = Loaded & Inserted;
     } else {
       // Construct a new instance and insert it
       var stylesheetProps = assign(
@@ -44980,6 +44980,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
 
         if (_instance) {
+          resource.state.loading |= Inserted;
           resource.instance = _instance;
           markNodeAsHoistable(_instance);
           return _instance;
@@ -45565,74 +45566,76 @@ function suspendResource(hoistableRoot, resource, props) {
       }
     }
 
-    if (resource.instance === null) {
-      var qualifiedProps = props;
-      var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
+    if ((resource.state.loading & Inserted) === NotLoaded) {
+      if (resource.instance === null) {
+        var qualifiedProps = props;
+        var key = getStyleKey(qualifiedProps.href); // Attempt to hydrate instance from DOM
 
-      var instance = hoistableRoot.querySelector(
-        getStylesheetSelectorFromKey(key)
-      );
+        var instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key)
+        );
 
-      if (instance) {
-        // If this instance has a loading state it came from the Fizz runtime.
-        // If there is not loading state it is assumed to have been server rendered
-        // as part of the preamble and therefore synchronously loaded. It could have
-        // errored however which we still do not yet have a means to detect. For now
-        // we assume it is loaded.
-        var maybeLoadingState = instance._p;
+        if (instance) {
+          // If this instance has a loading state it came from the Fizz runtime.
+          // If there is not loading state it is assumed to have been server rendered
+          // as part of the preamble and therefore synchronously loaded. It could have
+          // errored however which we still do not yet have a means to detect. For now
+          // we assume it is loaded.
+          var maybeLoadingState = instance._p;
 
-        if (
-          maybeLoadingState !== null &&
-          typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
-          typeof maybeLoadingState.then === "function"
-        ) {
-          var loadingState = maybeLoadingState;
-          state.count++;
-          var ping = onUnsuspend.bind(state);
-          loadingState.then(ping, ping);
+          if (
+            maybeLoadingState !== null &&
+            typeof maybeLoadingState === "object" && // $FlowFixMe[method-unbinding]
+            typeof maybeLoadingState.then === "function"
+          ) {
+            var loadingState = maybeLoadingState;
+            state.count++;
+            var ping = onUnsuspend.bind(state);
+            loadingState.then(ping, ping);
+          }
+
+          resource.state.loading |= Inserted;
+          resource.instance = instance;
+          markNodeAsHoistable(instance);
+          return;
         }
 
-        resource.state.loading |= Inserted;
-        resource.instance = instance;
+        var ownerDocument = getDocumentFromRoot(hoistableRoot);
+        var stylesheetProps = stylesheetPropsFromRawProps(props);
+        var preloadProps = preloadPropsMap.get(key);
+
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        } // Construct and insert a new instance
+
+        instance = ownerDocument.createElement("link");
         markNodeAsHoistable(instance);
-        return;
+        var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
+        // between this resource being rendered on the client and being rendered with a late completed boundary.
+
+        linkInstance._p = new Promise(function (resolve, reject) {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        });
+        setInitialProperties(instance, "link", stylesheetProps);
+        resource.instance = instance;
       }
 
-      var ownerDocument = getDocumentFromRoot(hoistableRoot);
-      var stylesheetProps = stylesheetPropsFromRawProps(props);
-      var preloadProps = preloadPropsMap.get(key);
+      if (state.stylesheets === null) {
+        state.stylesheets = new Map();
+      }
 
-      if (preloadProps) {
-        adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
-      } // Construct and insert a new instance
+      state.stylesheets.set(resource, hoistableRoot);
+      var preloadEl = resource.state.preload;
 
-      instance = ownerDocument.createElement("link");
-      markNodeAsHoistable(instance);
-      var linkInstance = instance; // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race
-      // between this resource being rendered on the client and being rendered with a late completed boundary.
+      if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
+        state.count++;
 
-      linkInstance._p = new Promise(function (resolve, reject) {
-        linkInstance.onload = resolve;
-        linkInstance.onerror = reject;
-      });
-      setInitialProperties(instance, "link", stylesheetProps);
-      resource.instance = instance;
-    }
+        var _ping = onUnsuspend.bind(state);
 
-    if (state.stylesheets === null) {
-      state.stylesheets = new Map();
-    }
-
-    state.stylesheets.set(resource, hoistableRoot);
-    var preloadEl = resource.state.preload;
-
-    if (preloadEl && (resource.state.loading & Settled) === NotLoaded) {
-      state.count++;
-
-      var _ping = onUnsuspend.bind(state);
-
-      preloadEl.addEventListener("load", _ping);
-      preloadEl.addEventListener("error", _ping);
+        preloadEl.addEventListener("load", _ping);
+        preloadEl.addEventListener("error", _ping);
+      }
     }
   }
 }
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
index 95a10fcaa1..0fcb18700f 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -15478,7 +15478,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -15704,6 +15704,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$260)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$260),
             markNodeAsHoistable(instance$260),
             instance$260
@@ -15883,7 +15884,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16811,7 +16814,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1825 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-273dc50b",
+  version: "18.3.0-www-classic-8d8af9ad",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2176 = {
@@ -16841,7 +16844,7 @@ var internals$jscomp$inline_2176 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-273dc50b"
+  reconcilerVersion: "18.3.0-www-classic-8d8af9ad"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2177 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17329,4 +17332,4 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-classic-273dc50b";
+exports.version = "18.3.0-www-classic-8d8af9ad";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
index 620629ec4b..d270a8b668 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -15758,7 +15758,7 @@ function preinitStyle(href, precedence, options) {
           getStylesheetSelectorFromKey(key)
         ))
       )
-        state.loading = 1;
+        state.loading = 0;
       else {
         href = assign(
           { rel: "stylesheet", href: href, "data-precedence": precedence },
@@ -15984,6 +15984,7 @@ function acquireResource(hoistableRoot, resource, props) {
         );
         if (instance$264)
           return (
+            (resource.state.loading |= 4),
             (resource.instance = instance$264),
             markNodeAsHoistable(instance$264),
             instance$264
@@ -16163,7 +16164,9 @@ function suspendResource(hoistableRoot, resource, props) {
   var state = suspendedState;
   if (
     "stylesheet" === resource.type &&
-    ("string" !== typeof props.media || !1 !== matchMedia(props.media).matches)
+    ("string" !== typeof props.media ||
+      !1 !== matchMedia(props.media).matches) &&
+    0 === (resource.state.loading & 4)
   ) {
     if (null === resource.instance) {
       var key = getStyleKey(props.href),
@@ -16388,7 +16391,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1784 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-035cd9a2",
+  version: "18.3.0-www-modern-a09b3b42",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2140 = {
@@ -16419,7 +16422,7 @@ var internals$jscomp$inline_2140 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-035cd9a2"
+  reconcilerVersion: "18.3.0-www-modern-a09b3b42"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2141 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16835,4 +16838,4 @@ exports.useFormState = function () {
 exports.useFormStatus = function () {
   throw Error(formatProdErrorMessage(248));
 };
-exports.version = "18.3.0-www-modern-035cd9a2";
+exports.version = "18.3.0-www-modern-a09b3b42";