better image loading for NFTMedia

gnosisguild · Jan 23, 2024 · 147446d · 147446d · vercel · Jan 23, 2024
1 parent 90911f9
commit 147446d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/components/NFTMedia/NFTMedia.module.css b/frontend/src/components/NFTMedia/NFTMedia.module.css
@@ -1,5 +1,6 @@
 .noImage {
-  height: 100%;
+  width: 100%;
+  aspect-ratio: 1;
   background-color: var(--box-bg);
   border-radius: 10px;
 }

diff --git a/frontend/src/components/NFTMedia/index.tsx b/frontend/src/components/NFTMedia/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { MoralisNFT } from "../../types/Token"
 
 import classes from "./NFTMedia.module.css"
@@ -12,9 +12,14 @@ const getIPFSHashFromURL = (url: string) => {
 
 const NFTMedia = ({ nft }: { nft: MoralisNFT }) => {
   const [imageError, setImageError] = useState(false)
+  const [imageLoaded, setImageLoaded] = useState(false)
   const metadata = JSON.parse(nft.metadata || "{}")
   const alt = metadata.name || "NFT image"
 
+  useEffect(() => {
+    setImageLoaded(false)
+  }, [nft])
+
   let src = ""
   let type = "image/*"
 
@@ -45,7 +50,9 @@ const NFTMedia = ({ nft }: { nft: MoralisNFT }) => {
   }
   return (
     <>
-      {(imageError || !src) && <div className={classes.noImage}></div>}
+      {(imageError || !imageLoaded || !src) && (
+        <div className={classes.noImage}></div>
+      )}
       {!imageError && src && (
         <div className={classes.imageContainer}>
           {type.includes("image") && (
@@ -54,13 +61,15 @@ const NFTMedia = ({ nft }: { nft: MoralisNFT }) => {
               alt={alt}
               className={classes.image}
               onError={() => setImageError(true)}
+              onLoad={() => setImageLoaded(true)}
             />
           )}
           {type.includes("video") && (
             <video
               src={src}
               className={classes.image}
               onError={() => setImageError(true)}
+              onLoad={() => setImageLoaded(true)}
               autoPlay
               muted
             />