From d94710171d2f06dcb2563e7c76c141c623c8dbaf Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 27 Feb 2024 09:55:14 -0700
Subject: [PATCH] Don't lazy load on iOS and don't use skeleton (#10096)

* Don't lazy load on iOS and don't use skeleton

* Cleanup banner

* All safari
---
 web/src/components/dynamic/NewReviewData.tsx   |  2 +-
 .../player/PreviewThumbnailPlayer.tsx          | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx
index 89bb2d467..2a743a924 100644
--- a/web/src/components/dynamic/NewReviewData.tsx
+++ b/web/src/components/dynamic/NewReviewData.tsx
@@ -39,7 +39,7 @@ export default function NewReviewData({
 
   return (
     <div className={className}>
-      <div className="flex justify-center items-center mr-[100px]">
+      <div className="flex justify-center items-center md:mr-[100px]">
         <Button
           className={`${
             hasUpdate
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 2bfc3b4f2..dce5c0612 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -138,9 +138,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 +149,7 @@ export default function PreviewThumbnailPlayer({
                 "/media/frigate/",
                 ""
               )}`}
-              loading="lazy"
+              loading={isSafari ? "eager" : "lazy"}
               onLoad={() => {
                 onImgLoad();
               }}
@@ -439,3 +437,15 @@ function PreviewContextItems({
     </ContextMenuContent>
   );
 }
+
+function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
+  if (imgLoaded) {
+    return;
+  }
+
+  return isSafari ? (
+    <div className={`absolute inset-0 bg-gray-300`} />
+  ) : (
+    <Skeleton className={`absolute inset-0`} />
+  );
+}