From 10efb80be20a058309e57568727ca7e4004973f2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:48:02 -0500
Subject: [PATCH] skeleton for timeline

---
 web/src/views/events/EventView.tsx | 46 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index e84440748..02e34f0d4 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -870,28 +870,32 @@ function MotionReview({
         </div>
       </div>
       <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
-        <MotionReviewTimeline
-          segmentDuration={segmentDuration}
-          timestampSpread={15}
-          timelineStart={timeRangeSegments.end}
-          timelineEnd={timeRangeSegments.start}
-          motionOnly={motionOnly}
-          showHandlebar
-          handlebarTime={currentTime}
-          setHandlebarTime={setCurrentTime}
-          events={reviewItems?.all ?? []}
-          motion_events={motionData ?? []}
-          severityType="significant_motion"
-          contentRef={contentRef}
-          onHandlebarDraggingChange={(scrubbing) => {
-            if (playing && scrubbing) {
-              setPlaying(false);
-            }
+        {motionData ? (
+          <MotionReviewTimeline
+            segmentDuration={segmentDuration}
+            timestampSpread={15}
+            timelineStart={timeRangeSegments.end}
+            timelineEnd={timeRangeSegments.start}
+            motionOnly={motionOnly}
+            showHandlebar
+            handlebarTime={currentTime}
+            setHandlebarTime={setCurrentTime}
+            events={reviewItems?.all ?? []}
+            motion_events={motionData ?? []}
+            severityType="significant_motion"
+            contentRef={contentRef}
+            onHandlebarDraggingChange={(scrubbing) => {
+              if (playing && scrubbing) {
+                setPlaying(false);
+              }
 
-            setScrubbing(scrubbing);
-          }}
-          dense={isMobile}
-        />
+              setScrubbing(scrubbing);
+            }}
+            dense={isMobile}
+          />
+        ) : (
+          <Skeleton className="rounded-2xl size-full" />
+        )}
       </div>
 
       <VideoControls