From cd1cf0188b312a917dca9ee8f2fa3b8775ba8004 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:39:27 -0500
Subject: [PATCH] render skeleton for preview player until motion data is
 loaded

---
 web/src/views/events/EventView.tsx | 43 +++++++++++++++++-------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 8a12ec347..e84440748 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -42,6 +42,7 @@ import VideoControls from "@/components/player/VideoControls";
 import { TimeRange } from "@/types/timeline";
 import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity";
 import useOptimisticState from "@/hooks/use-optimistic-state";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type EventViewProps = {
   reviews?: ReviewSegment[];
@@ -837,25 +838,29 @@ function MotionReview({
             const detectionType = getDetectionType(camera.name);
             return (
               <div key={camera.name} className={`relative ${spans}`}>
-                <PreviewPlayer
-                  key={camera.name}
-                  className={`rounded-2xl ${spans} ${grow}`}
-                  camera={camera.name}
-                  timeRange={currentTimeRange}
-                  startTime={previewStart}
-                  cameraPreviews={relevantPreviews || []}
-                  isScrubbing={scrubbing}
-                  onControllerReady={(controller) => {
-                    videoPlayersRef.current[camera.name] = controller;
-                  }}
-                  onClick={() =>
-                    onOpenRecording({
-                      camera: camera.name,
-                      startTime: Math.min(currentTime, Date.now() / 1000 - 10),
-                      severity: "significant_motion",
-                    })
-                  }
-                />
+                {motionData ? (
+                  <PreviewPlayer
+                    key={camera.name}
+                    className={`rounded-2xl ${spans} ${grow}`}
+                    camera={camera.name}
+                    timeRange={currentTimeRange}
+                    startTime={previewStart}
+                    cameraPreviews={relevantPreviews || []}
+                    isScrubbing={scrubbing}
+                    onControllerReady={(controller) => {
+                      videoPlayersRef.current[camera.name] = controller;
+                    }}
+                    onClick={() =>
+                      onOpenRecording({
+                        camera: camera.name,
+                        startTime: currentTime,
+                        severity: "significant_motion",
+                      })
+                    }
+                  />
+                ) : (
+                  <Skeleton className={`rounded-2xl ${spans} ${grow}`} />
+                )}
                 <div
                   className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
                 />