Merge pull request #1715 from blockscout/tom2drum/issue-1710

Incorrect NFT media placeholder when navigating between pages
blockscout · Mar 18, 2024 · 089e667 · 089e667
2 parents 8c1be25 + 3b1694d
commit 089e667
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
@@ -47,6 +47,10 @@ const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const content = (() => {
+    if (isLoading) {
+      return null;
+    }
+
     if (!mediaInfo || isLoadingError) {
       const styleProps = withFullscreen ? {} : mediaStyleProps;
       return <NftFallback { ...styleProps }/>;
@@ -78,7 +82,7 @@ const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen
   })();
 
   const modal = (() => {
-    if (!mediaInfo || !withFullscreen) {
+    if (!mediaInfo || !withFullscreen || isLoading) {
       return null;
     }
 

diff --git a/ui/token/TokenInventory.tsx b/ui/token/TokenInventory.tsx
@@ -68,7 +68,7 @@ const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
       >
         { items.map((item, index) => (
           <TokenInventoryItem
-            key={ token.address + '_' + item.id + (inventoryQuery.isPlaceholderData ? '_' + index : '') }
+            key={ item.id + '_' + index + (inventoryQuery.isPlaceholderData ? '_' + 'placeholder' : '') }
             item={ item }
             isLoading={ inventoryQuery.isPlaceholderData || tokenQuery.isPlaceholderData }
             token={ token }