add skeleton and change observer threshold

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -19,6 +19,7 @@ import {
 import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
 import axios from "axios";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { Skeleton } from "../ui/skeleton";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -120,6 +121,7 @@ export default function PreviewThumbnailPlayer({
               />
             </div>
           )}
+          {!imgLoaded && <Skeleton className="w-full h-full rounded-2xl" />}
           <img
             className={`w-full h-full transition-opacity ${
               playingBack ? "opacity-0" : "opacity-100"
@@ -129,8 +131,11 @@ export default function PreviewThumbnailPlayer({
               "/media/frigate/",
               ""
             )}`}
-            onLoad={() => setImgLoaded(true)}
+            onLoad={() => {
+              setImgLoaded(true);
+            }}
           />
+
           {imgLoaded &&
             (review.severity == "alert" || review.severity == "detection") && (
               <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">

web/src/components/timeline/EventSegment.tsx

@@ -255,11 +255,12 @@ export function EventSegment({
       />
 
       {severity.map((severityValue, index) => (
-        <React.Fragment key={index}>
+        <React.Fragment key={segmentKey + "_severity"}>
           {severityValue === displaySeverityType && (
             <div
               className="mr-3 w-[8px] h-2 flex justify-left items-end"
               data-severity={severityValue}
+              data-timestamp={new Date(timestamp)}
             >
               <div
                 key={`${segmentKey}_${index}_primary_data`}

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

web/src/views/events/DesktopEventView.tsx

@@ -133,7 +133,7 @@ export default function DesktopEventView({
           setMinimap([...visibleTimestamps]);
         });
       },
-      { root: contentRef.current, threshold: 0.5 }
+      { root: contentRef.current, threshold: 0.1 }
     );
 
     return () => {