[DevTools] only polyfill requestAnimationFrame when necessary (#24651)

Author: mondaychen

packages/react-devtools-extensions/src/main.js

@@ -33,18 +33,25 @@ const isEdge = getBrowserName() === 'Edge';
 // since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
 // mock requestAnimationFrame with setTimeout as a temporary workaround
 // https://github.com/facebook/react/issues/24626
-// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
 if (isChrome || isEdge) {
-  const FRAME_TIME = 16;
-  let lastTime = 0;
-  window.requestAnimationFrame = function(callback, element) {
-    const now = window.performance.now();
-    const nextTime = Math.max(lastTime + FRAME_TIME, now);
-    return setTimeout(function() {
-      callback((lastTime = nextTime));
-    }, nextTime - now);
-  };
-  window.cancelAnimationFrame = clearTimeout;
+  const timeoutID = setTimeout(() => {
+    // if requestAnimationFrame is not working, polyfill it
+    // The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
+    const FRAME_TIME = 16;
+    let lastTime = 0;
+    window.requestAnimationFrame = function(callback, element) {
+      const now = window.performance.now();
+      const nextTime = Math.max(lastTime + FRAME_TIME, now);
+      return setTimeout(function() {
+        callback((lastTime = nextTime));
+      }, nextTime - now);
+    };
+    window.cancelAnimationFrame = clearTimeout;
+  }, 400);
+
+  requestAnimationFrame(() => {
+    clearTimeout(timeoutID);
+  });
 }
 
 let panelCreated = false;