From 3b1694dc2ebba4e58afe91a9ef3c91f377deff2b Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Mon, 18 Mar 2024 11:20:58 +0300
Subject: [PATCH] Incorrect NFT media placeholder when navigating between pages

Fixes #1710
---
 ui/shared/nft/NftMedia.tsx  | 6 +++++-
 ui/token/TokenInventory.tsx | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index ace164692a..51dd03b6e5 100644
--- 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
index dce3a726f6..bbd1e264db 100644
--- 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 }