import { useCallback, useEffect, useRef, useState } from 'react';

/**
 *
 * @returns a function to prevent displaying the component it is
 * used in immediately so animation can be a little bit smoother
 */
export function useOnMounted() {
  const onMounted = useRef(false);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    onMounted.current = true;
    setTimeout(() => {
      setLoading(false);
    });

    return () => {
      onMounted.current = false;
    };
  }, []);

  return { onMounted: useCallback(() => onMounted.current, []), isLoading };
}