constant img height to reduce layout shift

src/js/components/embed/Image.tsx

@@ -16,10 +16,10 @@ const Image: Embed = {
       setShowModal(true);
     };
     return (
-      <div className="flex justify-center md:justify-start">
+      <div className="flex justify-center items-center md:justify-start h-96 my-2">
         <SafeImg
           onClick={onClick}
-          className="my-2 rounded max-h-[70vh] md:max-h-96 max-w-full cursor-pointer"
+          className="my-2 rounded md:max-h-96 max-w-full cursor-pointer"
           src={match}
         />
         <Show when={showModal}>

src/js/components/helpers/InfiniteScroll.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+const INCREASE_BY = 5;
+
+type Props = { children: any; margin?: string; loadMore?: () => void };
+
+// TODO save scroll position to history state
+function InfiniteScroll({ children, margin = '2000px', loadMore }: Props) {
+  const [visibleCount, setVisibleCount] = useState(INCREASE_BY);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const sentinelRef = useRef(null);
+
+  useEffect(() => {
+    if (sentinelRef.current && !observerRef.current) {
+      const options = {
+        root: null,
+        rootMargin: margin,
+        threshold: 0,
+      };
+
+      observerRef.current = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setVisibleCount((prev) => prev + INCREASE_BY);
+
+            if (loadMore && visibleCount >= children.length) {
+              loadMore?.();
+            }
+          }
+        });
+      }, options);
+
+      observerRef.current.observe(sentinelRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [visibleCount, margin, loadMore, children.length]);
+
+  return (
+    <>
+      {children.slice(0, visibleCount)}
+      {visibleCount < children.length && <div ref={sentinelRef} />}
+    </>
+  );
+}
+
+export default InfiniteScroll;