From e60e54ff1352f05d4cf1ffbe7709835ce8119c26 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 16 Nov 2022 21:28:33 +0000 Subject: [PATCH] image priority loading --- src/components/Project/index.tsx | 2 ++ src/components/ProjectImage/index.tsx | 5 ++++- src/components/ProjectPreview/index.tsx | 14 ++++++++++---- src/components/Projects/index.tsx | 6 ++++-- src/pages/_document.tsx | 2 +- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/Project/index.tsx b/src/components/Project/index.tsx index 022a3cb..f885e3b 100644 --- a/src/components/Project/index.tsx +++ b/src/components/Project/index.tsx @@ -48,6 +48,8 @@ export default function Project({ project }: { project: ProjectType }) { alt={title} key={i} sizes="100vw" + // give priority to the first image + priority={i === 0} /> ))} diff --git a/src/components/ProjectImage/index.tsx b/src/components/ProjectImage/index.tsx index dd714d7..73110c8 100644 --- a/src/components/ProjectImage/index.tsx +++ b/src/components/ProjectImage/index.tsx @@ -21,12 +21,14 @@ export default function ProjectImage({ image, alt, sizes, - className + className, + priority = false }: { image: ImageType alt: string sizes: string className?: string + priority?: boolean }) { const [loaded, setLoaded] = useState(false) const animationControls = useAnimation() @@ -55,6 +57,7 @@ export default function ProjectImage({ height={image.height} sizes={sizes} quality={85} + priority={priority} placeholder="empty" // blurDataURL={image.blurDataURL} onLoadingComplete={() => setLoaded(true)} diff --git a/src/components/ProjectPreview/index.tsx b/src/components/ProjectPreview/index.tsx index 0a3e2d1..f56ce79 100644 --- a/src/components/ProjectPreview/index.tsx +++ b/src/components/ProjectPreview/index.tsx @@ -1,22 +1,28 @@ import Link from 'next/link' import styles from './index.module.css' -import Icon from '../Icon' import ProjectImage from '../ProjectImage' import ImageType from '../../interfaces/image' type Props = { title: string slug: string - images: ImageType[] + image: ImageType + imagePriority: boolean } -export default function ProjectPreview({ title, slug, images }: Props) { +export default function ProjectPreview({ + title, + slug, + image, + imagePriority +}: Props) { return (