only render when visible

web/src/components/timeline/EventSegment.tsx

@@ -196,13 +196,16 @@ export function EventSegment({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTimestamp]);
 
-  const [segmentVisible, setSegmentVisible] = useState(false);
+  const [segmentRendered, setSegmentRendered] = useState(false);
   const segmentObserverRef = useRef<IntersectionObserver | null>(null);
-  const segmentRef = useRef<HTMLDivElement>(null);
+  const segmentRef = useRef(null);
+
   useEffect(() => {
     const segmentObserver = new IntersectionObserver(
       ([entry]) => {
-        setSegmentVisible(entry.isIntersecting);
+        if (entry.isIntersecting && !segmentRendered) {
+          setSegmentRendered(true);
+        }
       },
       { threshold: 0 },
     );
@@ -218,7 +221,18 @@ export function EventSegment({
         segmentObserverRef.current.disconnect();
       }
     };
-  }, []);
+  }, [segmentRendered]);
+
+  if (!segmentRendered) {
+    return (
+      <div
+        key={segmentKey}
+        ref={segmentRef}
+        data-segment-id={segmentKey}
+        className={`segment ${segmentClasses}`}
+      />
+    );
+  }
 
   return (
     <div
@@ -229,67 +243,63 @@ export function EventSegment({
       onClick={segmentClick}
       onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
     >
-      {segmentVisible && (
-        <>
-          {showMinimap && (
-            <MinimapBounds
-              isFirstSegmentInMinimap={isFirstSegmentInMinimap}
-              isLastSegmentInMinimap={isLastSegmentInMinimap}
-              alignedMinimapStartTime={alignedMinimapStartTime}
-              alignedMinimapEndTime={alignedMinimapEndTime}
-              firstMinimapSegmentRef={firstMinimapSegmentRef}
-              dense={dense}
-            />
-          )}
+      {showMinimap && (
+        <MinimapBounds
+          isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+          isLastSegmentInMinimap={isLastSegmentInMinimap}
+          alignedMinimapStartTime={alignedMinimapStartTime}
+          alignedMinimapEndTime={alignedMinimapEndTime}
+          firstMinimapSegmentRef={firstMinimapSegmentRef}
+          dense={dense}
+        />
+      )}
 
-          <Tick timestamp={timestamp} timestampSpread={timestampSpread} />
+      <Tick timestamp={timestamp} timestampSpread={timestampSpread} />
 
-          <Timestamp
-            isFirstSegmentInMinimap={isFirstSegmentInMinimap}
-            isLastSegmentInMinimap={isLastSegmentInMinimap}
-            timestamp={timestamp}
-            timestampSpread={timestampSpread}
-            segmentKey={segmentKey}
-          />
+      <Timestamp
+        isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+        isLastSegmentInMinimap={isLastSegmentInMinimap}
+        timestamp={timestamp}
+        timestampSpread={timestampSpread}
+        segmentKey={segmentKey}
+      />
 
-          {severity.map((severityValue: number, index: number) => (
-            <React.Fragment key={index}>
-              {severityValue === displaySeverityType && (
-                <HoverCard openDelay={200} closeDelay={100}>
-                  <HoverCardTrigger asChild>
-                    <div className="absolute left-1/2 z-10 h-[8px] w-[20px] -translate-x-1/2 transform cursor-pointer md:w-[40px]">
-                      <div className="flex w-[20px] flex-row justify-center md:w-[40px]">
-                        <div className="flex justify-center">
-                          <div
-                            className="absolute left-1/2 z-10 ml-[2px] h-[8px] w-[8px] -translate-x-1/2 transform cursor-pointer"
-                            data-severity={severityValue}
-                          >
-                            <div
-                              key={`${segmentKey}_${index}_primary_data`}
-                              className={`h-[8px] w-full bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
-                            ></div>
-                          </div>
-                        </div>
+      {severity.map((severityValue: number, index: number) => (
+        <React.Fragment key={index}>
+          {severityValue === displaySeverityType && (
+            <HoverCard openDelay={200} closeDelay={100}>
+              <HoverCardTrigger asChild>
+                <div className="absolute left-1/2 z-10 h-[8px] w-[20px] -translate-x-1/2 transform cursor-pointer md:w-[40px]">
+                  <div className="flex w-[20px] flex-row justify-center md:w-[40px]">
+                    <div className="flex justify-center">
+                      <div
+                        className="absolute left-1/2 z-10 ml-[2px] h-[8px] w-[8px] -translate-x-1/2 transform cursor-pointer"
+                        data-severity={severityValue}
+                      >
+                        <div
+                          key={`${segmentKey}_${index}_primary_data`}
+                          className={`h-[8px] w-full bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
+                        ></div>
                       </div>
                     </div>
-                  </HoverCardTrigger>
-                  <HoverCardPortal>
-                    <HoverCardContent
-                      className="w-[250px] rounded-lg p-2 md:rounded-2xl"
-                      side="left"
-                    >
-                      <img
-                        className="rounded-lg"
-                        src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
-                      />
-                    </HoverCardContent>
-                  </HoverCardPortal>
-                </HoverCard>
-              )}
-            </React.Fragment>
-          ))}
-        </>
-      )}
+                  </div>
+                </div>
+              </HoverCardTrigger>
+              <HoverCardPortal>
+                <HoverCardContent
+                  className="w-[250px] rounded-lg p-2 md:rounded-2xl"
+                  side="left"
+                >
+                  <img
+                    className="rounded-lg"
+                    src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
+                  />
+                </HoverCardContent>
+              </HoverCardPortal>
+            </HoverCard>
+          )}
+        </React.Fragment>
+      ))}
     </div>
   );
 }

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useCallback, useMemo, useRef, RefObject } from "react";
+import { useCallback, useMemo, useRef, RefObject } from "react";
 import MotionSegment from "./MotionSegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
-import { isDesktop } from "react-device-detect";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
 
 export type MotionReviewTimelineProps = {
@@ -165,42 +164,6 @@ export function MotionReviewTimeline({
     ],
   );
 
-  const segmentsObserver = useRef<IntersectionObserver | null>(null);
-  useEffect(() => {
-    if (selectedTimelineRef.current && segments && isDesktop) {
-      segmentsObserver.current = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              const segmentId = entry.target.getAttribute("data-segment-id");
-
-              const segmentElements =
-                internalTimelineRef.current?.querySelectorAll(
-                  `[data-segment-id="${segmentId}"] .motion-segment`,
-                );
-              segmentElements?.forEach((segmentElement) => {
-                segmentElement.classList.remove("hidden");
-                segmentElement.classList.add("animate-in");
-              });
-            }
-          });
-        },
-        { threshold: 0 },
-      );
-
-      // Get all segment divs and observe each one
-      const segmentDivs =
-        selectedTimelineRef.current.querySelectorAll(".segment.has-data");
-      segmentDivs.forEach((segmentDiv) => {
-        segmentsObserver.current?.observe(segmentDiv);
-      });
-    }
-
-    return () => {
-      segmentsObserver.current?.disconnect();
-    };
-  }, [selectedTimelineRef, segments]);
-
   return (
     <ReviewTimeline
       timelineRef={selectedTimelineRef}

web/src/components/timeline/MotionSegment.tsx

@@ -1,11 +1,17 @@
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
 import { ReviewSegment } from "@/types/review";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import useTapUtils from "@/hooks/use-tap-utils";
 import { cn } from "@/lib/utils";
 
@@ -139,11 +145,6 @@ export function MotionSegment({
       : ""
   }`;
 
-  const animationClassesSecondHalf = `motion-segment ${secondHalfSegmentWidth > 0 ? "hidden" : ""}
-    zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
-  const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 0 ? "hidden" : ""}
-    zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
-
   const severityColorsBg: { [key: number]: string } = {
     1: reviewed
       ? "from-severity_significant_motion-dimmed/10 to-severity_significant_motion/10"
@@ -162,6 +163,44 @@ export function MotionSegment({
     }
   }, [segmentTime, setHandlebarTime]);
 
+  const [segmentRendered, setSegmentRendered] = useState(false);
+  const segmentObserverRef = useRef<IntersectionObserver | null>(null);
+  const segmentRef = useRef(null);
+
+  useEffect(() => {
+    const segmentObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !segmentRendered) {
+          setSegmentRendered(true);
+        }
+      },
+      { threshold: 0 },
+    );
+
+    if (segmentRef.current) {
+      segmentObserver.observe(segmentRef.current);
+    }
+
+    segmentObserverRef.current = segmentObserver;
+
+    return () => {
+      if (segmentObserverRef.current) {
+        segmentObserverRef.current.disconnect();
+      }
+    };
+  }, [segmentRendered]);
+
+  if (!segmentRendered) {
+    return (
+      <div
+        key={segmentKey}
+        ref={segmentRef}
+        data-segment-id={segmentKey}
+        className={`segment ${segmentClasses}`}
+      />
+    );
+  }
+
   return (
     <>
       {(((firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0) &&
@@ -171,6 +210,7 @@ export function MotionSegment({
         <div
           key={segmentKey}
           data-segment-id={segmentKey}
+          ref={segmentRef}
           className={cn(
             "segment",
             {
@@ -221,7 +261,6 @@ export function MotionSegment({
                   key={`${segmentKey}_motion_data_1`}
                   data-motion-value={secondHalfSegmentWidth}
                   className={cn(
-                    isDesktop && animationClassesSecondHalf,
                     "h-[2px]",
                     "rounded-full",
                     secondHalfSegmentWidth
@@ -241,7 +280,6 @@ export function MotionSegment({
                   key={`${segmentKey}_motion_data_2`}
                   data-motion-value={firstHalfSegmentWidth}
                   className={cn(
-                    isDesktop && animationClassesFirstHalf,
                     "h-[2px]",
                     "rounded-full",
                     firstHalfSegmentWidth