Lazily load viewer thumbnails (#240)

* Add lazy load component and lazily load viewer thumbnail images

* Make prettier

Author: mikeapp

package-lock.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"

package.json

@@ -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">