diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 156eb81d07de7..a8875eacfd60e 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/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;