wait for idle promise - runs async right before paint - safari fallback

resolveWhenIdle.js

const idleOptions = { timeout: 500 };
const request = window.requestIdleCallback || window.requestAnimationFrame;
const cancel = window.cancelIdleCallback || window.cancelAnimationFrame;

const resolveWhenIdle = {
  request,
  cancel,
  promise: (num) => new Promise((resolve) => request(resolve, Object.assign({}, idleOptions, num))),
};

It's different from setTimeout (runs async after paint) or microtask (sync code that's pushed to the end of the current work).

It uses one of the following functions because requestIdleCallback is not supported in Safari.

• requestIdleCallback (no sooner than the next pass through the event loop)
• requestAnimationFrame (runs async right before next paint).

This provides a consistent interface between the two.

It is used to introduce delays to allow animations or DOM updates to render as states change.

Examples:

await resolveWhenIdle.promise(50)

await resolveWhenIdle.promise({
  timeout: 50,
});