Updating list item key to prevent repeated images, and updating `Im…

…agePlaceholder` logic to set up for `loading` and `error` states.
mlibrary · Nov 12, 2024 · 063cbd8 · 063cbd8
1 parent 9fde689
commit 063cbd8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -122,7 +122,7 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction,
           : { to: item.url.replace(basePath, '') + window.location.search };
 
         return (
-          <li key={index} className={`shelf-browse-item ${(isCurrentItem || firstOrLastItem) ? 'shelf-browse-item-current' : ''} ${animationClass}`}>
+          <li key={item.call_number} className={`shelf-browse-item ${(isCurrentItem || firstOrLastItem) ? 'shelf-browse-item-current' : ''} ${animationClass}`}>
             <Anchor
               {...anchorAttributes}
               className={`focus underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}

diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js
@@ -3,30 +3,29 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 const ImagePlaceholder = ({ alt, src, ...rest }) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [hasError, setHasError] = useState(false);
+  const [imageState, setImageState] = useState('loading');
+  const [imgSrc, setImgSrc] = useState(src);
 
-  const handleLoad = () => {
-    setImageLoaded(true);
-    setHasError(false);
+  const handleImageLoad = () => {
+    setImageState('settled');
   };
 
-  const handleError = () => {
-    setImageLoaded(false);
-    setHasError(true);
+  const handleImageError = () => {
+    setImgSrc('/favicon-180x180.png');
+    setImageState('settled');
   };
 
   return (
     <>
       <img
-        src={src}
+        src={imgSrc}
         alt={alt}
-        onLoad={handleLoad}
-        onError={handleError}
-        style={{ display: imageLoaded && !hasError ? 'block' : 'none' }}
+        onLoad={handleImageLoad}
+        onError={handleImageError}
+        style={{ display: imageState === 'settled' ? 'block' : 'none' }}
       />
 
-      {(hasError || !imageLoaded) && (
+      {imageState === 'loading' && (
         <div
           className='image-placeholder'
           {...rest}