Use skeleton for review image loading (#10040)

* don't show chips and date when image is loading

* add skeleton and change observer threshold

* remove debug

* use skeleton for live view too

* old activity indicator looks better on live

* fix gradients and lazy load with skeleton

* fading effects

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -7,7 +7,7 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { isMobile, isSafari } from "react-device-detect";
+import { isFirefox, isMobile, isSafari } from "react-device-detect";
 import Chip from "../Chip";
 import {
   ContextMenu,
@@ -19,6 +19,8 @@ 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";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -49,6 +51,7 @@ export default function PreviewThumbnailPlayer({
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
   const [playback, setPlayback] = useState(false);
   const [progress, setProgress] = useState(0);
+  const [imgLoaded, setImgLoaded] = useState(false);
 
   const playingBack = useMemo(() => playback, [playback, autoPlayback]);
 
@@ -110,7 +113,7 @@ export default function PreviewThumbnailPlayer({
           onClick={onClick}
         >
           {playingBack && (
-            <div className="absolute left-0 top-0 right-0 bottom-0">
+            <div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
               <PreviewContent
                 review={review}
                 relevantPreview={relevantPreview}
@@ -119,37 +122,48 @@ export default function PreviewThumbnailPlayer({
               />
             </div>
           )}
-          <img
+          <LazyLoadImage
             className={`w-full h-full transition-opacity ${
               playingBack ? "opacity-0" : "opacity-100"
             }`}
-            loading="lazy"
             src={`${apiHost}${review.thumb_path.replace(
               "/media/frigate/",
               ""
             )}`}
+            onLoad={() => {
+              setImgLoaded(true);
+            }}
+            placeholder={<Skeleton className="w-full h-full rounded-xl" />}
           />
-          {(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">
-              {review.data.objects.map((object) => {
-                return getIconForLabel(object, "w-3 h-3 text-white");
-              })}
-              {review.data.audio.map((audio) => {
-                return getIconForLabel(audio, "w-3 h-3 text-white");
-              })}
-              {review.data.sub_labels?.map((sub) => {
-                return getIconForSubLabel(sub, "w-3 h-3 text-white");
-              })}
-            </Chip>
+
+          {!playingBack && imgLoaded && (
+            <>
+              <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
+                <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
+                  {(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">
+                      {review.data.objects.map((object) => {
+                        return getIconForLabel(object, "w-3 h-3 text-white");
+                      })}
+                      {review.data.audio.map((audio) => {
+                        return getIconForLabel(audio, "w-3 h-3 text-white");
+                      })}
+                      {review.data.sub_labels?.map((sub) => {
+                        return getIconForSubLabel(sub, "w-3 h-3 text-white");
+                      })}
+                    </Chip>
+                  )}
+                </div>
+              </div>
+              <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
+                <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
+                  <TimeAgo time={review.start_time * 1000} dense />
+                  {formattedDate}
+                </div>
+              </div>
+            </>
           )}
-          {!playingBack && (
-            <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
-              <TimeAgo time={review.start_time * 1000} dense />
-              {formattedDate}
-            </div>
-          )}
-          <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
-          <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
           {playingBack && (
             <Slider
               className="absolute left-0 right-0 bottom-0 z-10"
@@ -159,8 +173,8 @@ export default function PreviewThumbnailPlayer({
               max={100}
             />
           )}
-          {!playingBack && review.has_been_reviewed && (
-            <div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
+          {!playingBack && imgLoaded && review.has_been_reviewed && (
+            <div className="absolute left-0 top-0 bottom-0 right-0 z-10 bg-black bg-opacity-60" />
           )}
         </div>
       </ContextMenuTrigger>
@@ -192,7 +206,10 @@ function PreviewContent({
     }
 
     // start with a bit of padding
-    return Math.max(0, review.start_time - relevantPreview.start - PREVIEW_PADDING);
+    return Math.max(
+      0,
+      review.start_time - relevantPreview.start - PREVIEW_PADDING
+    );
   }, []);
   const [lastPercent, setLastPercent] = useState(0.0);
 
@@ -203,7 +220,7 @@ function PreviewContent({
       return;
     }
 
-    if (isSafari) {
+    if (isSafari || (isFirefox && isMobile)) {
       playerRef.current.pause();
       setManualPlayback(true);
     } else {
@@ -223,7 +240,8 @@ function PreviewContent({
       (playerRef.current?.currentTime || 0) - playerStartTime;
 
     // end with a bit of padding
-    const playerDuration = review.end_time - review.start_time + PREVIEW_PADDING;
+    const playerDuration =
+      review.end_time - review.start_time + PREVIEW_PADDING;
     const playerPercent = (playerProgress / playerDuration) * 100;
 
     if (
@@ -340,9 +358,8 @@ function InProgressPreview({
 
   if (!previewFrames || previewFrames.length == 0) {
     return (
-      <img
+      <LazyLoadImage
         className="h-full w-full"
-        loading="lazy"
         src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
       />
     );

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 () => {