Function useInView

packages/shared/src/features/giveback/useGivebackMotion.ts:38–112

(
  fallbackMs = 1400,
)

// IntersectionObserver is unavailable, and a safety timeout guarantees content
// is never left hidden in environments where observer callbacks are throttled.
export const useInView = <T extends Element>(
  fallbackMs = 1400,
): UseInViewResult<T> => {
  const ref = useRef<T>(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (
      typeof IntersectionObserver === 'undefined' ||
      typeof window === 'undefined'
    ) {
      setInView(true);
      return undefined;
    }

    let revealed = false;
    let rafId: number | undefined;
    let observer: IntersectionObserver | undefined;

    const reveal = () => {
      if (revealed) {
        return;
      }
      revealed = true;
      setInView(true);
    };

    // The observed element can mount after this effect first runs (e.g. it sits
    // behind a loading skeleton until data lands), so poll for it across frames
    // instead of bailing once when `ref.current` is still null.
    const observe = () => {
      if (revealed) {
        return;
      }
      const element = ref.current;
      if (!element) {
        rafId = window.requestAnimationFrame(observe);
        return;
      }

      const rect = element.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom > 0) {
        reveal();
        return;
      }

      observer = new IntersectionObserver(
        (entries) => {
          if (entries.some((entry) => entry.isIntersecting)) {
            reveal();
            observer?.disconnect();
          }
        },
        { rootMargin: '0px 0px -10% 0px', threshold: 0.15 },
      );
      observer.observe(element);
    };