From 7d03d9985288be74098999c74b17d19fe582a376 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Jul 2024 06:52:22 -0600
Subject: [PATCH] Show skeleton when live filmstrip items are loading (#12660)

---
 web/src/components/card/AnimatedEventCard.tsx | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 0531f3d87..552aa9f26 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -14,6 +14,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { useApiHost } from "@/api";
 import { isSafari } from "react-device-detect";
 import { usePersistence } from "@/hooks/use-persistence";
+import { Skeleton } from "../ui/skeleton";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -57,6 +58,8 @@ export function AnimatedEventCard({
     };
   }, [visibilityListener]);
 
+  const [isLoaded, setIsLoaded] = useState(false);
+
   // interaction
 
   const navigate = useNavigate();
@@ -109,6 +112,7 @@ export function AnimatedEventCard({
                 className="size-full select-none"
                 src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
                 loading={isSafari ? "eager" : "lazy"}
+                onLoad={() => setIsLoaded(true)}
               />
             ) : (
               <>
@@ -122,6 +126,11 @@ export function AnimatedEventCard({
                     setReviewed={() => {}}
                     setIgnoreClick={() => {}}
                     isPlayingBack={() => {}}
+                    onTimeUpdate={() => {
+                      if (!isLoaded) {
+                        setIsLoaded(true);
+                      }
+                    }}
                     windowVisible={windowVisible}
                   />
                 ) : (
@@ -132,6 +141,11 @@ export function AnimatedEventCard({
                     muted
                     disableRemotePlayback
                     loop
+                    onTimeUpdate={() => {
+                      if (!isLoaded) {
+                        setIsLoaded(true);
+                      }
+                    }}
                   >
                     <source
                       src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
@@ -142,11 +156,14 @@ export function AnimatedEventCard({
               </>
             )}
           </div>
-          <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
-            <div className="absolute bottom-0 left-1 w-full text-xs text-white">
-              <TimeAgo time={event.start_time * 1000} dense />
+          {isLoaded && (
+            <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
+              <div className="absolute bottom-0 left-1 w-full text-xs text-white">
+                <TimeAgo time={event.start_time * 1000} dense />
+              </div>
             </div>
-          </div>
+          )}
+          {!isLoaded && <Skeleton className="absolute inset-0" />}
         </div>
       </TooltipTrigger>
       <TooltipContent>