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 ( return (
<div className={className}> <div className={className}>
<div className="flex justify-center items-center mr-[100px]"> <div className="flex justify-center items-center md:mr-[100px]">
<Button <Button
className={`${ className={`${
hasUpdate hasUpdate

View File

@ -138,9 +138,7 @@ export default function PreviewThumbnailPlayer({
/> />
</div> </div>
)} )}
{!imgLoaded && ( <PreviewPlaceholder imgLoaded={imgLoaded} />
<Skeleton className={`absolute inset-0 w-full h-full`} />
)}
<div className={`${imgLoaded ? "visible" : "invisible"}`}> <div className={`${imgLoaded ? "visible" : "invisible"}`}>
<img <img
ref={imgRef} ref={imgRef}
@ -151,7 +149,7 @@ export default function PreviewThumbnailPlayer({
"/media/frigate/", "/media/frigate/",
"" ""
)}`} )}`}
loading="lazy" loading={isSafari ? "eager" : "lazy"}
onLoad={() => { onLoad={() => {
onImgLoad(); onImgLoad();
}} }}
@ -439,3 +437,15 @@ function PreviewContextItems({
</ContextMenuContent> </ContextMenuContent>
); );
} }
function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
if (imgLoaded) {
return;
}
return isSafari ? (
<div className={`absolute inset-0 bg-gray-300`} />
) : (
<Skeleton className={`absolute inset-0`} />
);
}