Skip to content

fix(web): add Safari fallback for requestIdleCallback #9137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KanteshMurade wants to merge 1 commit into
base: preview
Choose a base branch
from
+46 −32
Open

fix(web): add Safari fallback for requestIdleCallback #9137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/web/app/entry.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

import polyfills from "@/lib/polyfills";

void polyfills;

startTransition(() => {
hydrateRoot(
document,
Expand Down
49 changes: 39 additions & 10 deletions apps/web/core/lib/idle-task.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,49 @@ export type IdleTaskHandle = {
cancel: () => void;
};

const requestIdleFallback = (callback: IdleRequestCallback): number => {
const start = Date.now();

return window.setTimeout(() => {
callback({
didTimeout: false,
timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
});
}, 1);
};

const cancelIdleFallback = (id: number) => {
window.clearTimeout(id);
};

export const requestIdle = (callback: IdleRequestCallback, options?: IdleRequestOptions): number => {
if (typeof window !== "undefined" && typeof window.requestIdleCallback === "function")
return window.requestIdleCallback(callback, options);

return requestIdleFallback(callback);
};

export const cancelIdle = (id: number) => {
if (typeof window !== "undefined" && typeof window.cancelIdleCallback === "function")
return window.cancelIdleCallback(id);

return cancelIdleFallback(id);
Comment on lines +11 to +37
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Use globalThis timers in fallbacks to prevent no-window runtime crashes.

The fallback path is selected when window is unavailable, but both fallbacks still dereference window, which can throw immediately in that environment.

Suggested fix 
-const requestIdleFallback = (callback: IdleRequestCallback): number => {
+const requestIdleFallback = (
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions
+): number => {
   const start = Date.now();
 
-  return window.setTimeout(() => {
+  return globalThis.setTimeout(() => {
     callback({
       didTimeout: false,
       timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
     });
-  }, 1);
+  }, options?.timeout ?? 1);
 };
 
 const cancelIdleFallback = (id: number) => {
-  window.clearTimeout(id);
+  globalThis.clearTimeout(id);
 };
 
 export const requestIdle = (callback: IdleRequestCallback, options?: IdleRequestOptions): number => {
   if (typeof window !== "undefined" && typeof window.requestIdleCallback === "function")
     return window.requestIdleCallback(callback, options);
 
-  return requestIdleFallback(callback);
+  return requestIdleFallback(callback, options);
 };
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/core/lib/idle-task.ts` around lines 11 - 37, The fallback
implementations and availability checks should use globalThis instead of window
to avoid runtime errors when window is undefined: update requestIdleFallback and
cancelIdleFallback to call globalThis.setTimeout and globalThis.clearTimeout,
and change the runtime checks in requestIdle and cancelIdle to use typeof
globalThis !== "undefined" and typeof globalThis.requestIdleCallback /
globalThis.cancelIdleCallback === "function" so you only call
globalThis.requestIdleCallback(globalCallback, options) when available and
otherwise return requestIdleFallback(callback) / cancelIdleFallback(id).

};

export const installIdleCallbackPolyfill = () => {
if (typeof window === "undefined") return;

window.requestIdleCallback = window.requestIdleCallback ?? requestIdleFallback;
window.cancelIdleCallback = window.cancelIdleCallback ?? cancelIdleFallback;
};

/**
* Schedule lightweight work for idle time and return a cancel handle.
* Falls back to setTimeout when requestIdleCallback is unavailable.
*/
export const runIdleTask = (callback: () => void): IdleTaskHandle => {
if (typeof window !== "undefined" && typeof window.requestIdleCallback === "function") {
const idleId = window.requestIdleCallback(callback, { timeout: 300 });
return {
cancel: () => window.cancelIdleCallback(idleId),
};
}

const timeoutId = window.setTimeout(callback, 0);
export const runIdleTask = (callback: IdleRequestCallback): IdleTaskHandle => {
const idleId = requestIdle(callback, { timeout: 300 });
return {
cancel: () => window.clearTimeout(timeoutId),
cancel: () => cancelIdle(idleId),
};
};
25 changes: 3 additions & 22 deletions apps/web/core/lib/polyfills/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,8 @@
* See the LICENSE file for details.
*/

if (typeof window !== "undefined" && window) {
// Add request callback polyfill to browser in case it does not exist
window.requestIdleCallback =
window.requestIdleCallback ??
function (cb) {
const start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
},
});
}, 1);
};
import { installIdleCallbackPolyfill } from "@/lib/idle-task";

window.cancelIdleCallback =
window.cancelIdleCallback ??
function (id) {
clearTimeout(id);
};
}
installIdleCallbackPolyfill();

export {};
export default true;
Loading