From 99f64cb062123cae2a1280ea9df372aea0b4d3b3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 27 Feb 2024 09:41:01 -0700
Subject: [PATCH] Don't lazy load on iOS and don't use skeleton

---
 .../player/PreviewThumbnailPlayer.tsx         | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 2bfc3b4f2..c48924987 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -7,7 +7,12 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { isFirefox, isMobile, isSafari } from "react-device-detect";
+import {
+  isFirefox,
+  isMobile,
+  isMobileSafari,
+  isSafari,
+} from "react-device-detect";
 import Chip from "../Chip";
 import {
   ContextMenu,
@@ -138,9 +143,7 @@ export default function PreviewThumbnailPlayer({
               />
             </div>
           )}
-          {!imgLoaded && (
-            <Skeleton className={`absolute inset-0 w-full h-full`} />
-          )}
+          <PreviewPlaceholder imgLoaded={imgLoaded} />
           <div className={`${imgLoaded ? "visible" : "invisible"}`}>
             <img
               ref={imgRef}
@@ -151,7 +154,7 @@ export default function PreviewThumbnailPlayer({
                 "/media/frigate/",
                 ""
               )}`}
-              loading="lazy"
+              loading={isMobileSafari ? "eager" : "lazy"}
               onLoad={() => {
                 onImgLoad();
               }}
@@ -439,3 +442,15 @@ function PreviewContextItems({
     </ContextMenuContent>
   );
 }
+
+function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
+  if (imgLoaded) {
+    return;
+  }
+
+  return isMobileSafari ? (
+    <div className={`absolute inset-0 bg-gray-300`} />
+  ) : (
+    <Skeleton className={`absolute inset-0`} />
+  );
+}