From 147446d6981aaa241a39384e03028f1a720f3063 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Tue, 23 Jan 2024 10:56:00 -0500
Subject: [PATCH] better image loading for NFTMedia

---
 .../src/components/NFTMedia/NFTMedia.module.css     |  3 ++-
 frontend/src/components/NFTMedia/index.tsx          | 13 +++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NFTMedia/NFTMedia.module.css b/frontend/src/components/NFTMedia/NFTMedia.module.css
index f9f43f4..bbdc539 100644
--- 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
index 8d80239..e46ae67 100644
--- 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,6 +61,7 @@ const NFTMedia = ({ nft }: { nft: MoralisNFT }) => {
               alt={alt}
               className={classes.image}
               onError={() => setImageError(true)}
+              onLoad={() => setImageLoaded(true)}
             />
           )}
           {type.includes("video") && (
@@ -61,6 +69,7 @@ const NFTMedia = ({ nft }: { nft: MoralisNFT }) => {
               src={src}
               className={classes.image}
               onError={() => setImageError(true)}
+              onLoad={() => setImageLoaded(true)}
               autoPlay
               muted
             />