Merge pull request #16 from dennispassway/feature/lazy-load-image

add loading=lazy to thumbnails in mediagrid and medialist
Aratramba · Jan 28, 2021 · 9cbaffe · 9cbaffe
2 parents 06b9b17 + b423b5d
commit 9cbaffe
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/MediaGrid.tsx b/src/components/MediaGrid.tsx
@@ -105,7 +105,7 @@ export const MediaGrid = ({
 
 const ImageItem = ({ alt, onClick, onDoubleClick, selected, url }: MediaItemProps) => (
   <StyledMediaItem selected={selected} onClick={(e) => onClick(e)} onDoubleClick={onDoubleClick}>
-    <img alt={alt} src={`${url}?w=150&h=150&fit=crop&auto=format&q=80`} />
+    <img alt={alt} src={`${url}?w=150&h=150&fit=crop&auto=format&q=80`} loading="lazy" />
   </StyledMediaItem>
 );
 

diff --git a/src/components/MediaList.tsx b/src/components/MediaList.tsx
@@ -165,7 +165,7 @@ const MediaRow = ({
       <div>
         <StyledThumbnailContainer>
           {_type === 'sanity.imageAsset' ? (
-            <StyledImage alt={alt} src={`${url}?w=100&h=100&fit=crop&auto=format&q=80`} />
+            <StyledImage alt={alt} src={`${url}?w=100&h=100&fit=crop&auto=format&q=80`} loading="lazy" />
           ) : (
             <StyledFile>
               <Icon type="file" />