Lazily load viewer thumbnails (#240)

* Add lazy load component and lazily load viewer thumbnail images * Make prettier
samvera-labs · Dec 16, 2024 · 9164efb · 9164efb
1 parent f8a60d3
commit 9164efb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-i18next": "^15.1.1",
+    "react-lazy-load-image-component": "^1.6.2",
     "sanitize-html": "^2.13.1",
     "swiper": "^9.0.0",
     "uuid": "^9.0.1"

diff --git a/src/components/Viewer/Media/Thumbnail.tsx b/src/components/Viewer/Media/Thumbnail.tsx
@@ -14,6 +14,7 @@ import { Label } from "src/components/Primitives";
 import React from "react";
 import { convertTime } from "src/lib/utils";
 import { getLabel } from "src/hooks/use-iiif";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 
 /**
  * Determine appropriate icon by resource type
@@ -69,7 +70,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
     >
       <figure>
         <div>
-          {thumbnail?.id && <img src={thumbnail.id} alt={label as string} />}
+          {thumbnail?.id && (
+            <LazyLoadImage
+              src={thumbnail.id}
+              alt={label as string}
+              loading="lazy"
+            />
+          )}
 
           <Type>
             <Tag isIcon data-testid="thumbnail-tag">