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
This commit is contained in:
Nicolas Mowen 2024-02-27 09:55:14 -07:00 committed by GitHub
parent 21defbea9d
commit d94710171d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions

View File

@ -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

View File

@ -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`} />
);
}