diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 5dd8a9c91..ffca4800e 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -487,8 +487,6 @@ function PreviewFramesPlayer({
 
   // initial state
 
-  const [firstLoad, setFirstLoad] = useState(true);
-
   useEffect(() => {
     if (!controller) {
       return;
@@ -503,8 +501,6 @@ function PreviewFramesPlayer({
   }, [controller]);
 
   const onImageLoaded = useCallback(() => {
-    setFirstLoad(false);
-
     if (!controller) {
       return;
     }
@@ -540,12 +536,14 @@ function PreviewFramesPlayer({
         className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
         onLoad={onImageLoaded}
       />
-      {previewFrames?.length === 0 && (
+      {previewFrames && previewFrames.length === 0 && (
         <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
           No Preview Found for {camera.replaceAll("_", " ")}
         </div>
       )}
-      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
+      {previewFrames == undefined && (
+        <Skeleton className="absolute aspect-video size-full" />
+      )}
     </div>
   );
 }