import * as React from "react";

export const useAfterPaint = (): boolean => {
  const [painted, setPainted] = React.useState(false);

  React.useEffect(() => {
    let secondFrame: number | undefined;

    const firstFrame = requestAnimationFrame(() => {
      secondFrame = requestAnimationFrame(() => setPainted(true));
    });

    return () => {
      cancelAnimationFrame(firstFrame);

      if (secondFrame !== undefined) {
        cancelAnimationFrame(secondFrame);
      }
    };
  }, []);

  return painted;
};