[Perf] Batch requestIdleCallback calls

src/hooks/useHeavyAnimationCheck.ts

@@ -105,14 +105,14 @@ export function dispatchHeavyAnimationEvent(duration = AUTO_END_TIMEOUT) {
   return onEnd;
 }
 
-export function onFullyIdle(cb: NoneToVoidFunction, idleTimeout?: number) {
+export function onFullyIdle(cb: NoneToVoidFunction) {
   onIdle(() => {
     if (getIsAnimating()) {
       requestMeasure(() => {
-        onFullyIdle(cb, idleTimeout);
+        onFullyIdle(cb);
       });
     } else {
       cb();
     }
-  }, idleTimeout);
+  });
 }

src/util/schedulers.ts

@@ -84,16 +84,6 @@ export function throttleWith<F extends AnyToVoidFunction>(schedulerFn: Scheduler
   };
 }
 
-export function onIdle(cb: NoneToVoidFunction, timeout?: number) {
-  // eslint-disable-next-line no-restricted-globals
-  if (self.requestIdleCallback) {
-    // eslint-disable-next-line no-restricted-globals
-    self.requestIdleCallback(cb, { timeout });
-  } else {
-    onTickEnd(cb);
-  }
-}
-
 export const pause = (ms: number) => new Promise<void>((resolve) => {
   setTimeout(() => resolve(), ms);
 });
@@ -176,6 +166,45 @@ export function onTickEnd(callback: NoneToVoidFunction) {
   }
 }
 
+const IDLE_TIMEOUT = 500;
+
+let onIdleCallbacks: NoneToVoidFunction[] | undefined;
+
+export function onIdle(callback: NoneToVoidFunction) {
+  // eslint-disable-next-line no-restricted-globals
+  if (!self.requestIdleCallback) {
+    onTickEnd(callback);
+    return;
+  }
+
+  if (!onIdleCallbacks) {
+    onIdleCallbacks = [callback];
+
+    requestIdleCallback((deadline) => {
+      const currentCallbacks = onIdleCallbacks!;
+      onIdleCallbacks = undefined;
+
+      while (currentCallbacks.length) {
+        const cb = currentCallbacks.shift()!;
+        cb();
+
+        if (!deadline.timeRemaining()) break;
+      }
+
+      if (currentCallbacks.length) {
+        if (onIdleCallbacks) {
+          // Prepend the remaining callbacks if the next pass is already planned
+          onIdleCallbacks = currentCallbacks.concat(onIdleCallbacks);
+        } else {
+          currentCallbacks.forEach(onIdle);
+        }
+      }
+    }, { timeout: IDLE_TIMEOUT });
+  } else {
+    onIdleCallbacks.push(callback);
+  }
+}
+
 let beforeUnloadCallbacks: NoneToVoidFunction[] | undefined;
 
 export function onBeforeUnload(callback: NoneToVoidFunction, isLast = false) {