perf(demo): lazy render example tiles

[williaster]

🚀 Enhancements

Improve the performance of the initial gallery page load by lazy rendering visible tiles

Before	After

[hshoff]

Oh, might not want to use a ref as an effect dep. It'll be stable across re-renders and not trigger the effect. Can use useCallback(). https://legacy.reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

[indiesquidge]

What do you think about this hook instead?

function useIntersectionObserver() {
  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
  const prevObserver = useRef<IntersectionObserver | null>(null);

  const ref = useCallback((node: Element) => {
    if (prevObserver.current) {
      prevObserver.current.disconnect();
      prevObserver.current = null;
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        setEntry(entry);
      },
      { threshold: 0.01, root: null },
    );

    observer.observe(node);
    prevObserver.current = observer;
  }, []);

  return [ref, entry];
}

This could be a better approach for a few reasons:

1. I think useIntersectionObserver as a name feels like it more directly reflects its functionality, while useEverVisible is more abstract.
2. I think using disconnect is better because it completely removes the observer and stops watching all elements, ensuring proper cleanup, whereas unobserve only stops watching a specific element without cleaning up the observer itself, which can lead to memory leaks if not handled properly.
3. We can return the full IntersectionObserverEntry, giving access to more useful visibility data (maybe you don't want or care about this though since we're only using it to check if an element is visible or not).
4. We are only observing one element at a time in the hook, so even though the callback of the IntersectionObserver always returns an array of entries, the array will always have just one entry, so we don't need to loop over every entry.
5. The hook has fewer concerns about state tracking and effects.

[williaster]

I dig it! this is a great suggestion for all the reasons you listed, I was just being lazy (hah!) :)