feat(util): polyfil requestAnimationFrame, requestIdleCallbackFallback

Special thanks to

Co-authored-by: Paul Irish <commits@paul.irish>
Co-authored-by: Merten van Gerven <merten.vg@gmail.com>

core/util/src/delay.ts

@@ -1,3 +1,5 @@
+import {requestAnimationFrame} from './polyfill.js';
+
 export const delay = (duration: number): Promise<void> => {
   return new Promise((resolve) => setTimeout(resolve, duration));
 };

core/util/src/index.ts

@@ -2,3 +2,4 @@ export * from './delay.js';
 export * from './json.js';
 export * from './local-storage.js';
 export * from './client-id.js';
+export * from './polyfill.js';

core/util/src/polyfill.ts

@@ -0,0 +1,26 @@
+interface IndexableWindow {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export const win = globalThis as IndexableWindow;
+
+const requestAnimationFrameFallback = (callback: FrameRequestCallback): ReturnType<typeof setTimeout> =>
+  setTimeout(() => callback(Date.now()), 1000 / 60);
+
+export const requestAnimationFrame: typeof globalThis.requestAnimationFrame =
+  win.requestAnimationFrame ||
+  win.webkitRequestAnimationFrame ||
+  win.mozRequestAnimationFrame ||
+  requestAnimationFrameFallback;
+
+const requestIdleCallbackFallback = (
+    callback: () => void,
+    options?: IdleRequestOptions,
+): ReturnType<typeof setTimeout> => setTimeout(callback, options?.timeout ?? 2000);
+
+export const requestIdleCallback: typeof globalThis.requestIdleCallback =
+  win.requestIdleCallback ||
+  win.webkitRequestIdleCallback ||
+  win.mozRequestIdleCallback ||
+  requestIdleCallbackFallback;