Move the image timeout to a central place like the stylesheet timeout

Author: sebmarkbage

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

@@ -5905,7 +5905,9 @@ export function preloadResource(resource: Resource): boolean {
 
 type SuspendedState = {
   stylesheets: null | Map<StylesheetResource, HoistableRoot>,
-  count: number,
+  count: number, // suspensey css and active view transitions
+  imgCount: number, // suspensey images
+  waitingForImages: boolean, // false when we're no longer blocking on images
   unsuspend: null | (() => void),
 };
 let suspendedState: null | SuspendedState = null;
@@ -5914,6 +5916,8 @@ export function startSuspendingCommit(): void {
   suspendedState = {
     stylesheets: null,
     count: 0,
+    imgCount: 0,
+    waitingForImages: true,
     // 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
@@ -5922,6 +5926,8 @@ export function startSuspendingCommit(): void {
   };
 }
 
+const SUSPENSEY_STYLESHEET_TIMEOUT = 60000;
+
 const SUSPENSEY_IMAGE_TIMEOUT = 500;
 
 export function suspendInstance(
@@ -5946,13 +5952,10 @@ export function suspendInstance(
     // If this browser supports decode() API, we use it to suspend waiting on the image.
     // The loading should have already started at this point, so it should be enough to
     // just call decode() which should also wait for the data to finish loading.
-    state.count++;
-    const ping = onUnsuspend.bind(state);
-    Promise.race([
-      // $FlowFixMe[prop-missing]
-      instance.decode(),
-      new Promise(resolve => setTimeout(resolve, SUSPENSEY_IMAGE_TIMEOUT)),
-    ]).then(ping, ping);
+    state.imgCount++;
+    const ping = onUnsuspendImg.bind(state);
+    // $FlowFixMe[prop-missing]
+    instance.decode().then(ping, ping);
   }
 }
 
@@ -6087,7 +6090,7 @@ export function waitForCommitToBeReady(
 
   // We need to check the count again because the inserted stylesheets may have led to new
   // tasks to wait on.
-  if (state.count > 0) {
+  if (state.count > 0 || state.imgCount > 0) {
     return commit => {
       // We almost never want to show content before its styles have loaded. But
       // eventually we will give up and allow unstyled content. So this number is
@@ -6104,37 +6107,62 @@ export function waitForCommitToBeReady(
           state.unsuspend = null;
           unsuspend();
         }
-      }, 60000 + timeoutOffset); // one minute
+      }, SUSPENSEY_STYLESHEET_TIMEOUT + timeoutOffset);
+
+      const imgTimer = setTimeout(() => {
+        // We're no longer blocked on images. If CSS resolves after this we can commit.
+        state.waitingForImages = false;
+        if (state.count === 0) {
+          if (state.stylesheets) {
+            insertSuspendedStylesheets(state, state.stylesheets);
+          }
+          if (state.unsuspend) {
+            const unsuspend = state.unsuspend;
+            state.unsuspend = null;
+            unsuspend();
+          }
+        }
+      }, SUSPENSEY_IMAGE_TIMEOUT + timeoutOffset);
 
       state.unsuspend = commit;
 
       return () => {
         state.unsuspend = null;
         clearTimeout(stylesheetTimer);
+        clearTimeout(imgTimer);
       };
     };
   }
   return null;
 }
 
-function onUnsuspend(this: SuspendedState) {
-  this.count--;
-  if (this.count === 0) {
-    if (this.stylesheets) {
+function checkIfFullyUnsuspended(state: SuspendedState) {
+  if (state.count === 0 && (state.imgCount === 0 || !state.waitingForImages)) {
+    if (state.stylesheets) {
       // If we haven't actually inserted the stylesheets yet we need to do so now before starting the commit.
       // The reason we do this after everything else has finished is because we want to have all the stylesheets
       // load synchronously right before mutating. Ideally the new styles will cause a single recalc only on the
       // new tree. When we filled up stylesheets we only inlcuded stylesheets with matching media attributes so we
       // wait for them to load before actually continuing. We expect this to increase the count above zero
-      insertSuspendedStylesheets(this, this.stylesheets);
-    } else if (this.unsuspend) {
-      const unsuspend = this.unsuspend;
-      this.unsuspend = null;
+      insertSuspendedStylesheets(state, state.stylesheets);
+    } else if (state.unsuspend) {
+      const unsuspend = state.unsuspend;
+      state.unsuspend = null;
       unsuspend();
     }
   }
 }
 
+function onUnsuspend(this: SuspendedState) {
+  this.count--;
+  checkIfFullyUnsuspended(this);
+}
+
+function onUnsuspendImg(this: SuspendedState) {
+  this.imgCount--;
+  checkIfFullyUnsuspended(this);
+}
+
 // We use a value that is type distinct from precedence to track which one is last.
 // This ensures there is no collision with user defined precedences. Normally we would
 // just track this in module scope but since the precedences are tracked per HoistableRoot