From 390a65c4d4af5d1e8dcdb74c7e7704618952024d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 25 Feb 2024 16:30:47 -0600
Subject: [PATCH] add skeleton and change observer threshold

---
 .../components/player/PreviewThumbnailPlayer.tsx  |  7 ++++++-
 web/src/components/timeline/EventSegment.tsx      |  3 ++-
 web/src/components/ui/skeleton.tsx                | 15 +++++++++++++++
 web/src/views/events/DesktopEventView.tsx         |  2 +-
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/ui/skeleton.tsx

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 0b57b8840..e0c48940f 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/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">
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 7113e660e..5f69ba53f 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/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`}
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..01b8b6d4f
--- /dev/null
+++ b/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 }
diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index c0e376984..ef8d2e58b 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/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 () => {