Merge pull request #45 from danskernesdigitalebibliotek/DDFBRA-130-pr…

…e-fetching-og-loading-states fix: improve loading state handling and image rendering in WorkCard image
danskernesdigitalebibliotek · Nov 14, 2024 · 47ad089 · 47ad089
2 parents ceb6cab + 5dfb3eb
commit 47ad089
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 48 deletions.
diff --git a/components/shared/workCard/WorkCard.tsx b/components/shared/workCard/WorkCard.tsx
@@ -18,7 +18,7 @@ type WorkCardProps = {
 }
 
 const WorkCard = ({ work }: WorkCardProps) => {
-  const { data: dataCovers } = useGetCoverCollection({
+  const { data: dataCovers, isLoading: isLoadingCovers } = useGetCoverCollection({
     type: "pid",
     identifiers: [getAllWorkPids(work).join(", ")],
     sizes: [
@@ -69,11 +69,13 @@ const WorkCard = ({ work }: WorkCardProps) => {
             </Badge>
           )}
           <div className="relative mx-auto flex h-full w-full items-center">
-            <WorkCardImage
-              lowResSrc={lowResCover || ""}
-              src={coverSrc?.[0] || ""}
-              alt="work image"
-            />
+            {!isLoadingCovers && (
+              <WorkCardImage
+                lowResSrc={lowResCover || ""}
+                src={coverSrc?.[0] || ""}
+                alt={`${work.titles.full[0]} cover billede`}
+              />
+            )}
           </div>
           <div className="my-auto flex min-h-[15%] items-center py-3 md:py-4">
             <WorkCardAvailabilityRow materialTypes={work.materialTypes} />

diff --git a/components/shared/workCard/WorkCardImage.tsx b/components/shared/workCard/WorkCardImage.tsx
@@ -36,7 +36,7 @@ export const WorkCardImage: FC<Props> = ({ src, lowResSrc, alt }) => {
 
   return (
     <div className="flex h-full w-full items-center" ref={ref}>
-      {!imageError && (
+      {!imageError && src ? (
         <Tilt
           scale={1.05}
           transitionSpeed={2500}
@@ -45,48 +45,50 @@ export const WorkCardImage: FC<Props> = ({ src, lowResSrc, alt }) => {
           tiltReverse={true}
           className={"relative m-auto"}
           style={{ paddingTop, width: `min(100%,${imageWidthByContainerHeight}px)` }}>
-          <Image
-            src={lowResSrc}
-            alt={alt}
-            height={imageHeight}
-            width={imageWidth}
-            sizes="20px"
-            loading="eager"
-            className={cn(
-              `absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain transition-all duration-500
-              will-change-transform`,
-              imageLoaded ? "shadow-none" : "shadow-cover-picture"
-            )}
-            onLoad={({ target }) => {
-              // get the intrinsic dimensions of the image
-              const { naturalWidth, naturalHeight } = target as HTMLImageElement
-              setImageHeight(naturalHeight)
-              setImageWidth(naturalWidth)
-            }}
-          />
-          <Image
-            src={src}
-            alt={alt}
-            height={imageHeight}
-            width={imageWidth}
-            sizes="100vw"
-            loading="lazy"
-            className={cn(
-              `absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain shadow-cover-picture
-              transition-all duration-500 will-change-transform`,
-              imageLoaded ? "opacity-100" : "opacity-0"
-            )}
-            onLoad={() => {
-              setImageLoaded(true)
-            }}
-            onError={() => {
-              setImageError(true)
-            }}
-          />
+          {lowResSrc && (
+            <Image
+              src={lowResSrc}
+              alt={alt}
+              height={imageHeight}
+              width={imageWidth}
+              sizes="20px"
+              loading="eager"
+              className={cn(
+                `absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain transition-all duration-500
+                  will-change-transform`,
+                imageLoaded ? "shadow-none" : "shadow-cover-picture"
+              )}
+              onLoad={({ target }) => {
+                // get the intrinsic dimensions of the image
+                const { naturalWidth, naturalHeight } = target as HTMLImageElement
+                setImageHeight(naturalHeight)
+                setImageWidth(naturalWidth)
+              }}
+            />
+          )}
+          {src && (
+            <Image
+              src={src}
+              alt={alt}
+              height={imageHeight}
+              width={imageWidth}
+              sizes="100vw"
+              loading="lazy"
+              className={cn(
+                `absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain shadow-cover-picture
+                  transition-all duration-500 will-change-transform`,
+                imageLoaded ? "opacity-100" : "opacity-0"
+              )}
+              onLoad={() => {
+                setImageLoaded(true)
+              }}
+              onError={() => {
+                setImageError(true)
+              }}
+            />
+          )}
         </Tilt>
-      )}
-
-      {imageError && (
+      ) : (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}