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 TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; 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 Chip from "../Chip";
import { import {
ContextMenu, ContextMenu,
@ -138,9 +143,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 +154,7 @@ export default function PreviewThumbnailPlayer({
"/media/frigate/", "/media/frigate/",
"" ""
)}`} )}`}
loading="lazy" loading={isMobileSafari ? "eager" : "lazy"}
onLoad={() => { onLoad={() => {
onImgLoad(); onImgLoad();
}} }}
@ -439,3 +442,15 @@ function PreviewContextItems({
</ContextMenuContent> </ContextMenuContent>
); );
} }
function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
if (imgLoaded) {
return;
}
return isMobileSafari ? (
<div className={`absolute inset-0 bg-gray-300`} />
) : (
<Skeleton className={`absolute inset-0`} />
);
}