only calculate motion data for visible motion segments

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -83,52 +83,17 @@ export function MotionReviewTimeline({
     motion_events,
   );
 
-  // Generate segment times for the timeline
   const segmentTimes = useMemo(() => {
     const segments = [];
     let segmentTime = timelineStartAligned;
 
-    while (segmentTime >= timelineStartAligned - timelineDuration) {
+    for (let i = 0; i < Math.ceil(timelineDuration / segmentDuration); i++) {
-      const motionStart = segmentTime;
-      const motionEnd = motionStart + segmentDuration;
-
-      const firstHalfMotionValue = getMotionSegmentValue(motionStart);
-      const secondHalfMotionValue = getMotionSegmentValue(
-        motionStart + segmentDuration / 2,
-      );
-
-      const segmentMotion =
-        firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
-      const overlappingReviewItems = events.some(
-        (item) =>
-          (item.start_time >= motionStart && item.start_time < motionEnd) ||
-          ((item.end_time ?? timelineStart) > motionStart &&
-            (item.end_time ?? timelineStart) <= motionEnd) ||
-          (item.start_time <= motionStart &&
-            (item.end_time ?? timelineStart) >= motionEnd),
-      );
-
-      if ((!segmentMotion || overlappingReviewItems) && motionOnly) {
-        // exclude segment if necessary when in motion only mode
-        segmentTime -= segmentDuration;
-        continue;
-      }
-
       segments.push(segmentTime);
       segmentTime -= segmentDuration;
     }
+
     return segments;
-    // we know that these deps are correct
+  }, [timelineStartAligned, segmentDuration, timelineDuration]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    segmentDuration,
-    timelineStartAligned,
-    timelineDuration,
-    events,
-    getMotionSegmentValue,
-    motion_events,
-    motionOnly,
-  ]);
 
   const scrollToSegment = useCallback(
     (segmentTime: number, ifNeeded?: boolean) => {

web/src/components/timeline/VirtualizedMotionSegments.tsx

@@ -9,7 +9,7 @@ import React, {
 import MotionSegment from "./MotionSegment";
 import { ReviewSegment, MotionData } from "@/types/review";
 
-interface VirtualizedMotionSegmentsProps {
+type VirtualizedMotionSegmentsProps = {
   timelineRef: React.RefObject<HTMLDivElement>;
   segments: number[];
   events: ReviewSegment[];
@@ -24,7 +24,7 @@ interface VirtualizedMotionSegmentsProps {
   dense: boolean;
   motionOnly: boolean;
   getMotionSegmentValue: (timestamp: number) => number;
-}
+};
 
 export interface VirtualizedMotionSegmentsRef {
   scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
@@ -125,36 +125,31 @@ export const VirtualizedMotionSegments = forwardRef<
       scrollToSegment,
     }));
 
-    const totalHeight = segments.length * SEGMENT_HEIGHT;
+    const renderSegment = useCallback(
-    const visibleSegments = segments.slice(
+      (segmentTime: number, index: number) => {
-      visibleRange.start,
+        const motionStart = segmentTime;
-      visibleRange.end,
+        const motionEnd = motionStart + segmentDuration;
+
+        const firstHalfMotionValue = getMotionSegmentValue(motionStart);
+        const secondHalfMotionValue = getMotionSegmentValue(
+          motionStart + segmentDuration / 2,
         );
 
-    return (
+        const segmentMotion =
-      <div
+          firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
-        ref={containerRef}
+        const overlappingReviewItems = events.some(
-        className="h-full w-full"
+          (item) =>
-        style={{ position: "relative", willChange: "transform" }}
+            (item.start_time >= motionStart && item.start_time < motionEnd) ||
-      >
+            ((item.end_time ?? segmentTime) > motionStart &&
-        <div style={{ height: `${totalHeight}px`, position: "relative" }}>
+              (item.end_time ?? segmentTime) <= motionEnd) ||
-          {visibleRange.start > 0 && (
+            (item.start_time <= motionStart &&
-            <div
+              (item.end_time ?? segmentTime) >= motionEnd),
-              style={{
-                position: "absolute",
-                top: 0,
-                height: `${visibleRange.start * SEGMENT_HEIGHT}px`,
-                width: "100%",
-              }}
-              aria-hidden="true"
-            />
-          )}
-          {visibleSegments.map((segmentTime, index) => {
-            const firstHalfMotionValue = getMotionSegmentValue(segmentTime);
-            const secondHalfMotionValue = getMotionSegmentValue(
-              segmentTime + segmentDuration / 2,
         );
 
+        if ((!segmentMotion || overlappingReviewItems) && motionOnly) {
+          return null; // Skip rendering this segment in motion only mode
+        }
+
         return (
           <div
             key={`${segmentTime}_${segmentDuration}`}
@@ -182,13 +177,58 @@ export const VirtualizedMotionSegments = forwardRef<
             />
           </div>
         );
-          })}
+      },
+      [
+        events,
+        getMotionSegmentValue,
+        motionOnly,
+        segmentDuration,
+        showMinimap,
+        minimapStartTime,
+        minimapEndTime,
+        setHandlebarTime,
+        scrollToSegment,
+        dense,
+        timestampSpread,
+        visibleRange.start,
+      ],
+    );
+
+    const totalHeight = segments.length * SEGMENT_HEIGHT;
+    const visibleSegments = segments.slice(
+      visibleRange.start,
+      visibleRange.end,
+    );
+
+    return (
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={{ position: "relative", willChange: "transform" }}
+      >
+        <div style={{ height: `${totalHeight}px`, position: "relative" }}>
+          {visibleRange.start > 0 && (
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                height: `${visibleRange.start * SEGMENT_HEIGHT}px`,
+                width: "100%",
+              }}
+              aria-hidden="true"
+            />
+          )}
+          {visibleSegments.map((segmentTime, index) =>
+            renderSegment(segmentTime, index),
+          )}
           {visibleRange.end < segments.length && (
             <div
               style={{
                 position: "absolute",
                 top: `${visibleRange.end * SEGMENT_HEIGHT}px`,
-                height: `${(segments.length - visibleRange.end) * SEGMENT_HEIGHT}px`,
+                height: `${
+                  (segments.length - visibleRange.end) * SEGMENT_HEIGHT
+                }px`,
                 width: "100%",
               }}
               aria-hidden="true"
@@ -199,3 +239,5 @@ export const VirtualizedMotionSegments = forwardRef<
     );
   },
 );
+
+export default VirtualizedMotionSegments;