a function that lets you wait for animation frames to be called before executing a function

wait-for-frame.ts

function waitForFrames({
  frames,
  done,
}: {
  frames: number;
  done: () => void;
}): () => void {
  let frameId: number | null = null;
  let remainingFrames = frames;

  function scheduleFrame() {
    if (remainingFrames <= 0) {
      frameId = null;
      done();
      return;
    }
    frameId = requestAnimationFrame(() => {
      remainingFrames--;
      scheduleFrame();
    });
  }

  scheduleFrame();

  return function cleanup() {
    if (frameId != null) {
      cancelAnimationFrame(frameId);
      frameId = null;
    }
  };
}