Skip to content

Commit a2323ad

Browse files
doctypercwelch5
authored andcommitted
fix: Replace requestIdleCallback with requestAnimationFrame for a more consistent DOM write cycle. (#307)
* fix: Replace requestIdleCallback with requestAnimationFrame for a more consistent DOM write cycle. * fix: Update export * chore: skip flaky test
1 parent 6a3d3bf commit a2323ad

File tree

3 files changed

+259
-265
lines changed

3 files changed

+259
-265
lines changed

src/HelmetUtils.js

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -248,58 +248,59 @@ const reducePropsToState = propsList => ({
248248
)
249249
});
250250

251-
const requestIdleCallback = (() => {
252-
if (
253-
typeof window !== "undefined" &&
254-
typeof window.requestIdleCallback !== "undefined"
255-
) {
256-
return window.requestIdleCallback;
257-
}
258-
259-
return cb => {
260-
const start = Date.now();
261-
return setTimeout(() => {
262-
cb({
263-
didTimeout: false,
264-
timeRemaining() {
265-
return Math.max(0, 50 - (Date.now() - start));
266-
}
267-
});
268-
}, 1);
251+
const rafPolyfill = (() => {
252+
let clock = Date.now();
253+
254+
return (callback: Function) => {
255+
const currentTime = Date.now();
256+
257+
if (currentTime - clock > 16) {
258+
clock = currentTime;
259+
callback(currentTime);
260+
} else {
261+
setTimeout(() => {
262+
rafPolyfill(callback);
263+
}, 0);
264+
}
269265
};
270266
})();
271267

272-
const cancelIdleCallback = (() => {
273-
if (
274-
typeof window !== "undefined" &&
275-
typeof window.cancelIdleCallback !== "undefined"
276-
) {
277-
return window.cancelIdleCallback;
278-
}
268+
const cafPolyfill = (id: string | number) => clearTimeout(id);
279269

280-
return id => clearTimeout(id);
281-
})();
270+
const requestAnimationFrame = typeof window !== "undefined"
271+
? window.requestAnimationFrame ||
272+
window.webkitRequestAnimationFrame ||
273+
window.mozRequestAnimationFrame ||
274+
rafPolyfill
275+
: global.requestAnimationFrame || rafPolyfill;
276+
277+
const cancelAnimationFrame = typeof window !== "undefined"
278+
? window.cancelAnimationFrame ||
279+
window.webkitCancelAnimationFrame ||
280+
window.mozCancelAnimationFrame ||
281+
cafPolyfill
282+
: global.cancelAnimationFrame || cafPolyfill;
282283

283284
const warn = msg => {
284285
return console && typeof console.warn === "function" && console.warn(msg);
285286
};
286287

287-
let _helmetIdleCallback = null;
288+
let _helmetCallback = null;
288289

289290
const handleClientStateChange = newState => {
290-
if (_helmetIdleCallback) {
291-
cancelIdleCallback(_helmetIdleCallback);
291+
if (_helmetCallback) {
292+
cancelAnimationFrame(_helmetCallback);
292293
}
293294

294295
if (newState.defer) {
295-
_helmetIdleCallback = requestIdleCallback(() => {
296+
_helmetCallback = requestAnimationFrame(() => {
296297
commitTagChanges(newState, () => {
297-
_helmetIdleCallback = null;
298+
_helmetCallback = null;
298299
});
299300
});
300301
} else {
301302
commitTagChanges(newState);
302-
_helmetIdleCallback = null;
303+
_helmetCallback = null;
303304
}
304305
};
305306

@@ -637,5 +638,5 @@ export {convertReactPropstoHtmlAttributes};
637638
export {handleClientStateChange};
638639
export {mapStateOnServer};
639640
export {reducePropsToState};
640-
export {requestIdleCallback};
641+
export {requestAnimationFrame};
641642
export {warn};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy