administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-27 09:41:01 -07:00
parent 21defbea9d
commit 99f64cb062
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

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