Incorrect NFT media placeholder when navigating between pages

Fixes #1710
blockscout · Mar 18, 2024 · 3b1694d · 3b1694d
1 parent 8c1be25
commit 3b1694d
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 }