Use intersection observer for timeline segments

web/src/components/timeline/EventSegment.tsx

@@ -8,6 +8,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 import {
   HoverCard,
@@ -195,14 +196,41 @@ export function EventSegment({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTimestamp]);
 
+  const [segmentVisible, setSegmentVisible] = useState(false);
+  const segmentObserverRef = useRef<IntersectionObserver | null>(null);
+  const segmentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const segmentObserver = new IntersectionObserver(
+      ([entry]) => {
+        setSegmentVisible(entry.isIntersecting);
+      },
+      { threshold: 0 },
+    );
+
+    if (segmentRef.current) {
+      segmentObserver.observe(segmentRef.current);
+    }
+
+    segmentObserverRef.current = segmentObserver;
+
+    return () => {
+      if (segmentObserverRef.current) {
+        segmentObserverRef.current.disconnect();
+      }
+    };
+  }, []);
+
   return (
     <div
       key={segmentKey}
+      ref={segmentRef}
       data-segment-id={segmentKey}
       className={`segment ${segmentClasses}`}
       onClick={segmentClick}
       onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
     >
+      {segmentVisible && (
+        <>
           {showMinimap && (
             <MinimapBounds
               isFirstSegmentInMinimap={isFirstSegmentInMinimap}
@@ -260,6 +288,8 @@ export function EventSegment({
               )}
             </React.Fragment>
           ))}
+        </>
+      )}
     </div>
   );
 }