From 6286d2aa32bb52bc86f9e0c75ece7ddef2002362 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:13:13 -0600
Subject: [PATCH] reset loading state when moving through events in tracking
 details

---
 .../overlay/detail/TrackingDetails.tsx        | 43 ++++++++++++-------
 web/src/components/player/HlsVideoPlayer.tsx  |  2 +
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 0cd8a0d13..727dd4552 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -56,6 +56,7 @@ export function TrackingDetails({
   const apiHost = useApiHost();
   const imgRef = useRef<HTMLImageElement | null>(null);
   const [imgLoaded, setImgLoaded] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
   const [displaySource, _setDisplaySource] = useState<"video" | "image">(
     "video",
   );
@@ -70,6 +71,10 @@ export function TrackingDetails({
     (event.start_time ?? 0) + annotationOffset / 1000 - REVIEW_PADDING,
   );
 
+  useEffect(() => {
+    setIsVideoLoading(true);
+  }, [event.id]);
+
   const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([
     "timeline",
     {
@@ -527,22 +532,28 @@ export function TrackingDetails({
           )}
         >
           {displaySource == "video" && (
-            <HlsVideoPlayer
-              videoRef={videoRef}
-              containerRef={containerRef}
-              visible={true}
-              currentSource={videoSource}
-              hotKeys={false}
-              supportsFullscreen={false}
-              fullscreen={false}
-              frigateControls={true}
-              onTimeUpdate={handleTimeUpdate}
-              onSeekToTime={handleSeekToTime}
-              onUploadFrame={onUploadFrameToPlus}
-              isDetailMode={true}
-              camera={event.camera}
-              currentTimeOverride={currentTime}
-            />
+            <>
+              <HlsVideoPlayer
+                videoRef={videoRef}
+                containerRef={containerRef}
+                visible={true}
+                currentSource={videoSource}
+                hotKeys={false}
+                supportsFullscreen={false}
+                fullscreen={false}
+                frigateControls={true}
+                onTimeUpdate={handleTimeUpdate}
+                onSeekToTime={handleSeekToTime}
+                onUploadFrame={onUploadFrameToPlus}
+                onPlaying={() => setIsVideoLoading(false)}
+                isDetailMode={true}
+                camera={event.camera}
+                currentTimeOverride={currentTime}
+              />
+              {isVideoLoading && (
+                <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+              )}
+            </>
           )}
           {displaySource == "image" && (
             <>
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 20d3dd4d7..27daecf97 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -130,6 +130,8 @@ export default function HlsVideoPlayer({
       return;
     }
 
+    setLoadedMetadata(false);
+
     const currentPlaybackRate = videoRef.current.playbackRate;
 
     if (!useHlsCompat) {