[DevTools] only polyfill requestAnimationFrame when necessary (#24651)
Mengdi Chen committed
Jun 1, 2022 at 13:04 UTC
d300cebde2a63e742ccb8b6aa7b0f61db1ae29b4
1 file changed
+18
-11
packages/react-devtools-extensions/src/main.js
+18
-11
@@ -33,18 +33,25 @@ const isEdge = getBrowserName() === 'Edge';
33
// since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
34
// mock requestAnimationFrame with setTimeout as a temporary workaround
35
// https://github.com/facebook/react/issues/24626
36
-// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
36
if (isChrome || isEdge) {
38
- const FRAME_TIME = 16;
39
- let lastTime = 0;
40
- window.requestAnimationFrame = function(callback, element) {
41
- const now = window.performance.now();
42
- const nextTime = Math.max(lastTime + FRAME_TIME, now);
43
- return setTimeout(function() {
44
- callback((lastTime = nextTime));
45
- }, nextTime - now);
46
- };
47
- window.cancelAnimationFrame = clearTimeout;
37
+ const timeoutID = setTimeout(() => {
38
+ // if requestAnimationFrame is not working, polyfill it
39
+ // The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
40
+ const FRAME_TIME = 16;
41
+ let lastTime = 0;
42
+ window.requestAnimationFrame = function(callback, element) {
43
+ const now = window.performance.now();
44
+ const nextTime = Math.max(lastTime + FRAME_TIME, now);
45
+ return setTimeout(function() {
46
+ callback((lastTime = nextTime));
47
+ }, nextTime - now);
48
+ };
49
+ window.cancelAnimationFrame = clearTimeout;
50
+ }, 400);
51
+
52
+ requestAnimationFrame(() => {
53
+ clearTimeout(timeoutID);
54
+ });
55
}
56
57
let panelCreated = false;